canvas

by yshrkn

HTML

<canvas id="board" width="640" height="600"></canvas>

CSS

body {
  background: #ddd;
}

JavaScript

var canvas = document.getElementById("board");

// canvas に描画するための API にアクセスできるオブジェクトを返却
if (canvas.getContext) { 
  var ctx = canvas.getContext("2d");
}

// 円
ctx.beginPath();
ctx.strokeStyle = '#000';
ctx.arc(30, 30, 20, 0, Math.PI * 2, false);
ctx.stroke();

// 塗りつぶし
ctx.beginPath();
ctx.fillStyle = '#f00';
ctx.arc(30, 80, 20, 0, Math.PI * 2, false);
ctx.fill();

// 短形
ctx.beginPath();
ctx.strokeStyle = "#00f";
ctx.rect(10, 180, 40, 40);
ctx.fill();

// 短形塗りつぶし くり抜き 描画
ctx.fillStyle = "#00f";
ctx.strokeStyle = "#000";
ctx.fillRect(100, 10, 50, 100);
ctx.clearRect(110, 30, 30, 60);
ctx.strokeRect(120, 40, 10, 40);

// テクスト
ctx.strokeStyle = "#000";
ctx.fillStyle = "#0f0";
ctx.strokeText("Text", 200, 40);
ctx.fillText("Text", 200, 80);

// 線
ctx.beginPath();
ctx.moveTo(100, 140);
ctx.lineTo(150, 140);
ctx.lineTo(100, 180);
ctx.lineTo(150, 180);
ctx.stroke();

// 線の太さ変更
ctx.beginPath();
ctx.lineWidth = 1;
ctx.moveTo(200, 120);
ctx.lineTo(250, 120);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 5;
ctx.moveTo(200, 140);
ctx.lineTo(250, 140);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 10;
ctx.moveTo(200, 160);
ctx.lineTo(250, 160);
ctx.stroke();

// 円弧
ctx.beginPath();
ctx.lineWidth = 1;
ctx.arc(320, 20, 30, Math.PI / 4, Math.PI * 3 / 4, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(320, 100, 30, Math.PI / 2, Math.PI * 3 / 2, false);

// ベジェ曲線
ctx.beginPath();
ctx.moveTo(300, 150);
ctx.bezierCurveTo(350, 200, 380, 300, 350, 150);
ctx.stroke();
/* 

テキスト
// デフォルト
ctx.fillText("Text", 0, 250);

// フォントサイズを20px フォントをサンセリフへ
ctx.font = "20ox sans-serif";
ctx.fillText("Text", 0, 280);

// ボールド
ctx.font = "bold 20px sans-serif";
ctx.fillText("Text", 0, 310);

// イタリック
ctx.font = "italic 20px sans-serif";
ctx.fillText("Text", 0, 340);

// ボールド イタリック
ctx.font = "bold italic 20px sans-serif";
ctx.fillText("TeAAAAxt", 0, 370);


// 影付き
ctx.font = "20ox sans-serif";
ctx.shadowColor = '#bbb'; // 影の色
ctx.shadowBlur = 1; // ぼかし
ctx.shadowOffsetX = 3; //...