Canvas 基礎（線・図形・テキスト）

Canvas を触ってみたのでメモ。

線・図形

ブラウザがCanvas に対応してるかチェック

以下の書き方でチェックできる。


var canvas = document.getElementById('<canvasのid>');
if (!canvas || !canvas.getContext){
 return false;
}

四角形（塗りつぶしなし）

getContext('2d').strokeRect(x, y, width, height);

四角形（塗りつぶしあり）

getContext('2d').fillRect(x, y, width, height);

一部clear する四角形

getContext('2d').clearRect(x, y, width, height);

線の太さ（幅）を変える

getContext('2d').lineWidth = X;

角のスタイル変更

（デフォルト）getContext('2d').lineJoin = 'miter';

丸める getContext('2d').lineJoin = 'round';

面どり getContext('2d').lineJoin = 'bevel';

グラデーション

個人的にはCSS3 のほうが使いやすい印象。

線形グラデーション


var g = ctx.createLinearGradient(x, y, width, height);
g.addColorStop(0.0, "<color1>");
g.addColorStop(0.5, "<color2>");/*中間地点*/
g.addColorStop(1.0, "<color3>");
ctx.fillStyle = g;
ctx.fillRect(x, y, width, height);

円形グラデーション

          

var g_r = getContext('2d').createRadialGradient(x+width/2, y+height/2, r1, x+width/2, y+height/2, r2);
g_r.addColorStop(0.0, "<color1>");
g_r.addColorStop(0.5, "<color2>");/*中間地点*/
g_r.addColorStop(1.0, "<color3>");
getContext('2d').fillStyle = g_r;
getContext('2d').fillRect(x, y, width, height);

影・全体の透明度

影


getContext('2d').shadowColor = '<color>';
getContext('2d').shadowOffsetX = X;
getContext('2d').shadowOffsetY = Y;
getContext('2d').shadowBlur = α;/*ぼかし具合*/

全体の透明度

getContext('2d').globalAlpha = α;

変形

これもCSS3 のほうが使いやすい印象

スケールの変更

getContext('2d').scale(w, h);;

移動

getContext('2d').translate(x, y);

回転

角度の指定は、degreeでなく、ラジアンになっている。おそらく、OpenGLの名残？

getContext('2d').rotate(<degree> * Math.PI / 180);

線

直線を描く


getContext('2d').beginPath();
//始点
getContext('2d').moveTo(x0, y0);
//始点から線を描く
getContext('2d').lineTo(x1, y1);
//描画
getContext('2d').stroke();

始点と終点を結ぶ

getContext('2d').closePath();

塗りつぶし


getContext('2d').closePath();
//中身を塗る
getContext('2d').fill();

曲線を描く


getContext('2d').beginPath();
/*始点x, y, 半径, 角度1, 2 */
getContext('2d').arc(x, y, r, <rad1>, <rad2>);
getContext('2d').stroke();

曲線の角（終端）スタイルの変更

（デフォルト）getContext('2d').lineCap = 'butt';

丸める getContext('2d').lineCap = 'round';

四角にする getContext('2d').lineCap = 'square';

テキスト

codepen.io

テキスト表示


getContext('2d').font = '<font-weight> <font-size> <font-family>';
getContext('2d').textAlign = "left";/* right center start end */
getContext('2d').fillText('<テキスト>', x, y);