HTML 5新規API

Canvasキャンバス
canvas用途

ゲームミニゲーム

チャートレポートChartsプラグイン

クール効果banner

シミュレータ、グラフィックエディタなど

互換性
IE 9以上およびその他のブラウザ
canvasラベル
ツールバーの

width

height

 
canvas.width = 500;
canvas.height = 500;

方法

getContext()パラメータ2 d/webgl

に注意
css設定の幅ハイヒールwidth/height設定の幅が異なる
Context環境
getContextメソッドによる描画環境(描画コンテキスト)(オブジェクト)描画図形の取得そのオブジェクトによるメソッド/プロパティ
基本図面
パス

moveTo()開始位置

canvas.getContext("2d").moveTo(100, 100);

lineTo()直線、moveTo()の最初のlineTo()がmoveTo()の代わりにない場合

パスの開始と終了

beginPath()オープンパス

closePath()オフパス現在のパスを終了し、

を自動的に閉じる.

canvas.getContext("2d").beginPath();
canvas.getContext("2d").closePath();

注意:複雑なグラフィックは、必ずパス

をオンとオフにします.
線ストローク()

stroke()メソッド

strokeStyle線の色を設定

lineWidth線の太さを設定

canvas.getContext("2d").stroke();
canvas.getContext("2d").strokeStyle = "red";
canvas.getContext("2d").lineWidth = 1;

じゅうてん

fill()パディング

fillStyle塗りつぶし色

を設定

canvas.getContext("2d").fill();
canvas.getContext("2d").fillStyle = "red";

クイック長方形ツール

rect(x,y,width,height)矩形経路

を描画する

strokeRect(x,y,width,height)線矩形

strokeRect(x,y,width,height)充填矩形

clearRect(x,y,w,h)矩形をクリア(矩形範囲内の内容が消去される)

canvas.getContext("2d").rect(200,200,150,50);
canvas.getContext("2d").strokeRect(200,200,150,50);
canvas.getContext("2d").strokeRect(200,200,150,50);
canvas.getContext("2d"). clearRect(200,200,150,50);

円(円弧)

arc(x,y,r,start,end,wise)円弧

を描画する

start/endは開始位置単位が弧度、360角度=2 PI、180角度=PI

最後のパラメータ時計回り(false)/反時計回り(true)デフォルトfalse

canvas.getContext("2d").(150, 150, 100, 0, Math.PI/3, false);