HTML5のCanvasタグの使い方まとめ

HTML5のCanvasタグの使い方を簡単に説明します。見やすいようにWebレイアウトがいつもと違います。
<canvas></canvas>は図や絵を描く事が出来る便利な機能ですが、Javascriptを使うので非常に難しいです。

タグの書き方

<body>～</body>内に書くのは以下の一行だけです。

<canvas id="graph1" width="300" height="300"></canvas>

必ずidとwidthとheightは設定して下さい。

あとはスクリプトを書くだけです。

スクリプトの書き方

最小構成は以下のようになります。○○○部分に命令を書いていきます。

<script type="text/javascript">
window.onload = draw;   // 自動でスクリプトが実行するために必要
function draw(){
  var canvas1 = document.getElementById('graph1');   // id=graph1の要素をcanvas1として記憶
  var line1 = canvas1.getContext('2d');   // canvas1に二次元図を描く命令。指定できる引数は '2d' のみ
  line1.○○○
  line1.○○○
}
</script>

最も簡単なHTMLはこちら。canvasタグの下にscriptを書く場合にはwindow.onloadとfunction draw(){}で囲む必要は無い。

文法

塗りつぶし系

fillRect(20,10,50,40);  （サンプル） 四角形：(横位置,縦位置,横幅,縦幅)、単体で動く
clearRect(30,20,30,20);  （サンプル） 四角形の透明化：(横位置,縦位置,横幅,縦幅)
fill();  （サンプル） パス範囲を塗りつぶす

塗りつぶし系の修飾（fillより先に色設定しろ）

fillStyle = 'rgba(255,0,0,0.5)';  （サンプル） 塗りつぶし色：(R,G,B,α)
線形グラデーション  （サンプル） (開始横位置,開始縦位置,終点横位置,終点縦位置)、(距離,色)、距離は０から１
    var grad = line1.createLinearGradient(20,10,170,150);
       grad.addColorStop(0,'rgb(255,0,0)');
       grad.addColorStop(0.5,'rgb(0,255,0)');
       grad.addColorStop(1,'rgb(0,0,255)');
    line1.fillStyle = grad;
円形グラデーション  （サンプル） (開始横位置,開始縦位置,開始半径,終点横位置,終点縦位置,終点半径)、(距離,色)、距離は０から１
    var grad = line1.createRadialGradient(80,70,20,80,70,60);
       grad.addColorStop(0,'rgb(255,0,0)');
       grad.addColorStop(0.5,'rgb(0,255,0)');
       grad.addColorStop(1,'rgb(0,0,255)');
    line1.fillStyle = grad;

パスを引く（strokeをしないと見えない）

moveTo(80, 10);  （サンプル） 開始座標を指定：(横位置,縦位置)
lineTo(80, 70);  （サンプル） 直線を引く：(横位置,縦位置)
arc(45,80,25,90/180*Math.PI,270/180*Math.PI, false);  （サンプル） 円を書く：(横位置,縦位置,半径,開始角度/180*Math.PI,終了角度/180*Math.PI,true[半時計]false[正時計])
    0°と360°は３時位置、90°は６時位置、180°は９時位置
quadraticCurveTo(150,80,180,40);  （サンプル） 指定の制御点を伴う二次ベジェ曲線を引く：(制御点x,制御点y,終点横位置,終点縦位置)
bezierCurveTo(130,80,150,20,180,40);  （サンプル） 指定の制御点を伴う三次ベジェ曲線を引く：(制御点1x,制御点1y,制御点2x,制御点2y,終点横位置,終点縦位置)
arcTo(80,40,1,80,8);  （サンプル） 直線と円弧を引く：(制御点1x,制御点1y,制御点2x,制御点2y,角の丸み)
rect(20,10,50,40);  （サンプル） 四角形を引く：(横位置,縦位置,横幅,縦幅)、単体で動く、strokeRectで十分
closePath();  （サンプル） パスを閉じる
beginPath();  （サンプル） 現在のパスをリセットする

線形

strokeRect(20,60,50,40);  （サンプル） 四角形の線：(横位置,縦位置,横幅,縦幅)、単体で動く
stroke();  （サンプル） パスに線を引く

線形の修飾（strokeより先に設定しろ）

strokeStyle = 'rgba(0,255,0,0.5)';  （サンプル） 線の色：(R,G,B,α)
lineWidth = 4;  （サンプル） 線の太さ
lineCap = "round";  （サンプル） 端点の形を指定、["butt"（普通にぶつ切り）, "round"（丸）, "square"（四角）]
lineJoin = "round";  （サンプル） 線の繋ぎ目の処理を指定、["miter"（尖らせる）, "round"（丸く面取り）, "bevel"（直線で面取り）]
miterLimit　= 10;  （サンプル） lineJoin="miter" 時の処理を指定、（０から10の値）、小さいほど鋭角で"bevel"になる
setLineDash([5, 15]);  （サンプル） 破線にする、[線の長さ,途切れる長さ]、リセットするにはsetLineDash([])と書く、比較的新しめのブラウザしか対応してない（IE11以上）

他の修飾

shadowColor = "#f00";  （サンプル） 影の色
shadowOffsetX = 8;  （サンプル） 横方向の影の幅
shadowOffsetY = 8;  （サンプル） 縦方向の影の幅
shadowBlur = 10;  （サンプル） 影のぼかし具合
rotate(45/180*Math.PI);  （サンプル） 回転する：(角度/180*Math.PI)、座標(0,0)中心で回転、translateで中心移動させる
scale(2,0.6);  （サンプル） 倍率：(横倍率,縦倍率)
translate(40,100);  （サンプル） 移動：(横移動,縦移動)
globalAlpha = 0.5;  （サンプル） 透明度、strokeより先に設定しないと反映されない

文字

fillText("Happy",10, 20);  （サンプル） 文字を書く：("文字",横位置,縦位置,maxWidth)、maxWidthは無くても良い
strokeText("Happy",10, 20);  （サンプル） 中抜き文字を書く：("文字",横位置,縦位置,maxWidth)、maxWidthは無くても良い
font = "italic bold 32px 'Times New Roman'";  （サンプル） 文字属性：(italic bold pxサイズ '文字種')
textAlign = "center";  （サンプル） 配置位置：("left","right","center")
textBaseline = "bottom";  （サンプル） ベースライン：("bottom","alphabetic","middle","hanging","top")

画像

画像の挿入  （サンプル） (URL,横位置,縦位置)
    var img = new Image();
    img.src = "image.jpg";
    line1.drawImage(img,20,10);
clip()  （サンプル） パス内に画像を表示させる

　ツイート
2018/1/30