Blog

※ブログ移転しました。 → hamashun.me

Back To Blog Top2010年02月 | Back To Blog Top » | 2010年05月 »

2010年03月Archives

2010年03月03日

JS習作：canvasでモンドリアン風の絵を描いてみる

サンプルページ

概要

1月3週目分のJavaScriptです。 canvasにさわってみようがテーマ。塗りと直線で構成されたモンドリアンっぽい絵ならすぐに描けるんじゃね、って思いついて試してみました。

ソースコード

$(function(){

var canvas = document.getElementById('test');

if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(200, 0, 0)";
ctx.fillRect(100, 0, 300, 300);

ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(85, 0, 15, 400);

ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(0, 150, 85, 25);

ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(0, 300, 400, 15);

ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(350, 310, 15, 90);

ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(365, 350, 40, 15);


ctx.fillStyle = "rgb(0, 0, 200)";
ctx.fillRect(0, 315, 85, 85);

ctx.fillStyle = "rgb(250, 250, 0)";
ctx.fillRect(365, 365, 35, 35);

});

感想など

めんどくさい

手動で描くと大分面倒くさい。

次回は

今回はRectしか使ってないので、もっと色々使ってみたい。

Name: hamashun Day: 2010年03月03日 01:22 | Permanent Link | Comment (0)

2010年03月22日

JS習作：タイマーなど4本更新

概要

溜まってる分をある程度一気にやりました。

感想など

canvasでグラフ

例によって手書きでグラフを書いてみたんですが、canvasの座標は左上からだけどグラフの座標は左下なのが面倒でした。今度はカンマ区切りとかの値を渡して表示させたい。

組み込みオブジェクト

ここ最近は、DateオブジェクトとかMathオブジェクトとかいう、いわゆる組み込みオブジェクトを使う機会がありました。本で読んだ事はあったんですが、実際に使った事はあまりなかったので新鮮でした。便利だなーと言うか。

タイマーとかランチとかは完全に自分用です。

jQuery UI

簡単便利。サンプルが超分かりやすいですね。英語は読めないけどコードだけ読んだらどうにかなる感じ。
idやclassを自由に変えられるっていうのがマークアッパー好みですね。すごいなーこれ。

Name: hamashun Day: 2010年03月22日 19:19 | Permanent Link | Comment (0)