Canvas操作の基本

Canvas操作の基本をメモる

線を引く

beginPath()で開始。moveTo()で開始位置まで動いて、線を引く場所までlineTo()で動く。stroke()で実際に惹かれる。色を替える場合はstroke()の前なら大丈夫。strokeStyleで線の色を設定。

	// 線を引く
	ctx.beginPath();
	ctx.moveTo(xStart, yStart);
	ctx.lineTo(xEnd, yEnd);
	ctx.strokeStyle = color;
	ctx.stroke();

長方形を書く

fillRect()でいける。width/heightを引数に渡すことを注意。塗りつぶしの色はfillStyleで設定。

	// 長方形を書く
	ctx.fillStyle = color;
	ctx.fillRect(xStart, yStart, width, height);

不規則な形

lineTo()で適当に線を引きまくって、closePath()を呼び出せば最初と最後がくっつく。塗りつぶす場合はfill()でいける。

	// 不規則な形(三角形)
	ctx.beginPath();
	ctx.moveTo(xStart, yStart);
	ctx.lineTo(x1, y1);
	ctx.lineTo(x2, y2);
	ctx.strokeStyle = color;
	ctx.closePath();

グラデーション

createLinearGradient()は開始位置と終了位置で色の変わり方を設定、start/endは0-1の値を設定する。縦にかけたければX軸を、横にかけたければY軸を同じ値にする。

	// グラデーション(縦方向)
	var grad  = ctx.createLinearGradient(startX, startY, endX, endY);
	grad.addColorStop(start, colorStart);
	grad.addColorStop(end, colorEnd);
	ctx.fillStyle = grad;

アニメーション

案外力わざ。setInterval()でクルクル回して少しづつ伸ばしていくみたい。これならCSSアニメーションの方が綺麗だったりしないのかな。

	// 横長くなるアニメーション
	var w = 0;
	var animId = setInterval(function() {
		ctx.fillStyle = color;
		ctx.fillRect(xStart, yStart, w, height);
		w++;
		if(w > width) {
			clearInterval(animId);
		}
	}, 100);

まとめ

以上。ざっくりと使える分を書いてみた。

スマホで円グラフを表示するライブラリメモ

スマホで円グラフを作らないといけなくなったから調べてみた。試した環境は以下の3機種

  • android4系
  • nadroid2系
  • iPhone4系

3つぐらい見てみたけどChart.jsが一番良さげ。

gRaphaël

http://g.raphaeljs.com/

なんて読むのかわからない。Android2系だとVector画像が作れないのか表示されない。却下。

jQuery Visualize Plugin

http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/

jQuery系だから動くは動く。けど、ジャギが汚い。

Chart.js

http://www.chartjs.org/

なんかかっこいい。どれでも普通に表示される。