読者です 読者をやめる 読者になる 読者になる

halka-tech

技術的なことを書きます

canvasで○をいっぱい描画

html5

草間彌生作品の水玉模様をずっと見てるとゾワゾワしてくるのでcanvasを使って○をいっぱい描画してゾワゾワしよう。

サンプル

カジュアルなweb desining的な配色でやってみるとこうなります。

草間彌生

パラメータの説明

名前 説明
witdh canvasの横
height canvasの縦

initをクリックするとcanvasの大きさが確定します。

名前 説明
Count ○の数(はみ出てるので結構適当)、大きいと時間かかります。
Color ○の色。#FFFFFFのような感じで
Opacity 透過率。0から1までの小数
background 背景色。#FFFFFFのような感じで
radius rate 半径。大きいほど大きい○
pile up 次に描画するときに今までの○を上に重ねるか

GOで描画、destroyで背景色で塗りつぶす。

コード


面倒臭いので位置と半径は乱数です。
色と大きさと透過率を自分で設定してあとはどんなのができるかはやってみないと分かりません。

下準備

html5からできたcanvasで描画領域をつくる。

<canvas id="canvas">対応してない</canvas>

あとはjavascriptでやります。

	//<canvas id="canvas"></canvas>を取ってくる
	var canvas=document.getElementById('canvas');
	//ブラウザが対応しているかどうか見る。
	//対応してりゃcontextが取れる。
	if(canvas.getContext){
		//2次元でいいので2dにする。
		var context=canvas.getContext('2d');
}

円を描く

		//塗りつぶす色
		context.fillStyle = '#'+document.setting.color.value;
		//透過率
		context.globalAlpha=document.setting.opacity.value;
		//位置と半径を乱数で生成
		x=Math.floor(Math.random()*canvas.width);
		y=Math.floor(Math.random()*canvas.height);
		rad=Math.floor(Math.random()*document.setting.rad.value);
		//描画する
		context.beginPath();
		context.arc(x,y,rad,0,Math.PI*2,false);//x,y,半径,開始位置,終了位置,反時計回りにするかどうか
		context.fill();
 ||<
**四角形で塗りつぶす
>|javascript|
context.fillRect(0,0,canvas.width,canvas.height);//開始位置x,y,横幅,縦

html5のフォームまわり

超便利ですね。
type="number"で数字を指定
max,minで最大値と最小値の指定(今回の場合、負の値はおかしいのでmin=0で)
stepでnumberのステップを指定する。

そのうちやる

  • 草間彌生っぽくなるように○が重ならないようにどうにかする
  • 保存できるようにする(firefoxだと(二つボタンマウスでいう)右クリックのメニューから普通に保存できる)

参考

HTML5タグリファレンス http://www.htmq.com/html5/canvas.shtml
フォーム機能の拡張−そろそろ、HTML5 http://www.htmq.com/html5/005.shtml

投稿するところが特にないので

pixivに
http://www.pixiv.net/member_illust.php?mode=medium&illust_id=18285266
ほか