きったんの頭ん中☆

HOME > 開発室 > JavaScript

canvas

canvas テスト用のページ

テキスト

var ctx = canvas.getContext('2d');
ctx.font = '20px Verdana';
ctx.beginPath();
ctx.fillText('Hello World', 80, 80);

直線

var ctx = canvas.getContext('2d');
ctx.lineWidth = '5';
ctx.strokeStyle = 'blue';
ctx.beginPath();
ctx.moveTo(60, 120);
ctx.lineTo(200, 30);
ctx.stroke();

長方形

var ctx = canvas.getContext('2d');
ctx.fillStyle = 'lime';
ctx.beginPath();
ctx.fillRect(40, 40, 180, 80);

ctx.lineWidth = '5';
ctx.strokeStyle = 'blue';
ctx.strokeRect(40, 40, 180, 80);

円

var ctx = canvas.getContext('2d');
ctx.fillStyle = 'pink';
ctx.lineWidth = '5';
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.arc(150, 70, 50, 0, Math.PI*2, true);
ctx.fill();
ctx.stroke();

楕円

var ctx = canvas.getContext('2d');
ctx.scale(2,1);
ctx.fillStyle = 'pink';
ctx.lineWidth = '5';
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.arc(75, 70, 50, 0, Math.PI*2, true);
ctx.fill();
ctx.stroke();

ピクセル

var w = 32;
var h = 32;
var ctx = canvas.getContext('2d');
var image = ctx.getImageData(0, 0, w, h);
var data = image.data;
var i, j, t;
for (i = 0; i < w; ++i) {
  for (j = 0; j < h; ++j) {
    data[t] = (j << 3) & 0xff; ++t;
    data[t] = (i << 3) & 0xff; ++t;
    data[t] = ((i + j) << 3) & 0xff; ++t;
    data[t] = 0xff; ++t;
  }
}
ctx.putImageData(image, 0, 0);

リンク