概要

HTMLのテンプレート

<canvas id="canvas" width="400" height="200">
  お使いのブラウザはCanvasに対応していません。
</canvas>
<script src="script.js"></script>

canvasタグ内には非対応ブラウザ用の説明を書く。

JavaScriptのテンプレート

window.onload = function() {
  draw();
};

function draw() {
  var canvas = document.getElementById('canvas');
  if (!canvas || !canvas.getContext) return false;
  var ctx = canvas.getContext('2d');
  // 描画処理
}

四角形

四角形（枠線のみ）

ctx.strokeRect(x, y, width, height);

ctx.strokeRect(10, 10, 50, 50);

四角形（塗りつぶし）

ctx.fillRect(x, y, width, height);

ctx.fillRect(10, 10, 50, 50);

デフォルトの色は黒。

範囲内の図形の削除

ctx.clearRect(x, y, width, height);

ctx.clearRect(10, 10, 50, 50);

図形のスタイル

線の色を指定

ctx.strokeStyle = 色;

ctx.strokeStyle = "red";

ctx.strokeStyle = "#ff0000";

ctx.strokeStyle = "rgb(255, 0, 0)";

ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";

塗りつぶしの色を指定

ctx.fillStyle = 色;

ctx.fillStyle = "red";

ctx.fillStyle = "#ff0000";

ctx.fillStyle = "rgb(255, 0, 0)";

ctx.fillStyle = "rgba(255, 0, 0, 0.5)";

線の太さを指定

ctx.lineWidth = ピクセル;

ctx.lineWidth = 5;

線の角のスタイルを指定

ctx.lineJoin = スタイル;

ctx.lineJoin = "round"    // 角丸

ctx.lineJoin = "bevel"    // 八角形（角を切る）

ctx.lineJoin = "miter"    // 通常（デフォルト）

グラデーションを作成（線形）

var g = ctx.createLinearGradient(始点x, 始点y, 終点x, 終点y);

var g = ctx.createLinearGradient(0, 0, 0, 100);    // 縦方向

var g = ctx.createLinearGradient(0, 0, 100, 100);    // 斜め方向

グラデーションを作成（円形）

var g = ctx.createRadialGradient(始点x, 始点y, 始点半径, 終点x, 終点y, 終点半径);

var g = ctx.createRadialGradient(50, 50, 20, 50, 50, 60);

グラデーションの色を指定

g.addColorStop(オフセット, 色);

g.addColorStop(0.0, "red");
g.addColorStop(0.5, "yellow");
g.addColorStop(1.0, "blue");

グラデーションを適用

ctx.fillStyle = g;

ctx.fillStyle = g;

影

ctx.shadowColor = "#ccc"    // 影の色（指定方法は何でも良い）
ctx.shadowOffsetX = 5;      // 図形と影のずれ（x）
ctx.shadowOffsetY = 5;      // 図形と影のずれ（y）
ctx.shadowBlur = 2;         // ぼかし具合

透明度

ctx.globalAlpha = 透明度;

ctx.globalAlpha = 0.5;

図形の変形

描画後ではなく、描画前に図形を変形させる。

縮小・拡大

ctx.scale(x, y);

x, yは倍率を指定

ctx.scale(0.8, 0.8);    // 80%に縮小

回転

ctx.rotate(度 / 180 * Math.PI);

ctx.rotate(30 / 180 * Math.PI);    // 30度時計回りに回転

回転の起点は四角形の左上となっている。

移動

ctx.translate(x, y);

ctx.translate(100, 10);

直線

パスの開始

ctx.beignPath();

始点を指定

ctx.moveTo(x, y);

ctx.moveTo(20, 20);

始点から線を引く

ctx.lineTo(x, y);

ctx.lineTo(120, 20);     //  20, 20から120,  20まで線を引く
ctx.lineTo(120, 120);    // 120, 20から120, 120まで線を引く

パスの描画

ctx.stroke();

パスの始点と結ぶ

ctx.closePath();

パスの内部を塗りつぶす

ctx.fill();

円

円を描画

ctx.arc(x, y, 半径, 開始角, 終了角);

ctx.beginPath();
ctx.arc(100, 100, 50, 0 / 180 * Math.PI, 360 / 180 * Math.PI);    // 通常の円
ctx.stroke();

ctx.beginPath();
ctx.arc(100, 100, 50, 10 / 180 * Math.PI, 210 / 180 * Math.PI);    // 欠けた円
ctx.stroke();

0度は円の右。塗りつぶす場合にはctx.fill();を使う。その場合扇型にはならない。

線のスタイルを指定

ctx.lineCap = スタイル;

ctx.lineCap = 'butt';    // はみ出さない（デフォルト）

ctx.lineCap = 'round';    // 丸くなる（太い線でないとわからない）

ctx.lineCap = 'square';    // はみ出す

画像

画像を表示

var img = new Image();
img.src = 'img.jpg';
img.onload = function() {
  ctx.drawImage(img, 10, 10);
}

画像の変形もできる。

画像パターン

img.onload = function() {    // 画像が読み込まれた時実行
  var pattern = ctx.createPattern(img, 'repeat');    // no-repeat, repeat-x, repeat-yが指定可能
  ctx.fillStyle = pattern;    // パターンを適用
  ctx.fillRect(20, 20, 100, 100);    // 四角形を描画
}

保存 / 復元

保存

ctx.save();

復元

ctx.restore();

例

アニメーション

window.onload = function() {
  draw();
};

function draw() {
  var canvas = document.getElementById('canvas');
  if (!canvas || !canvas.getContext) return false;
  var ctx = canvas.getContext('2d');

  ctx.fillStyle = 'red';
  var y = 0;

  (function loop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if (y > canvas.height) y = -50;
    y++;
    ctx.fillRect(0, y, 50, 50);
    setTimeout(loop, 10);
  })();
}

ランダムな色の円を100個描画

window.onload = function() {
  draw();
};

function draw() {
  var canvas = document.getElementById('canvas');
  if (!canvas || !canvas.getContext) return false;
  var ctx = canvas.getContext('2d');

  ctx.globalAlpha = 0.5;

  for (var i = 0; i < 100; i++) {
    var x = Math.floor(Math.random() * 400);
    var y = Math.floor(Math.random() * 200);
    var r = Math.floor(Math.random() * 200);
    ctx.fillStyle = "rgb(" + rgb() + "," + rgb() + "," + rgb() + ")";
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fill();
  }

  function rgb() {
    return Math.floor(Math.random() * 255);
  }
}