Canvas に絵を描いてみる
HTML5 の Canvas に絵を描いてみました。
実行結果
ソース
キャンバスの id="no" (「の」です)に対し、直線と円弧のストロークを用いて、ひらがなの「の」を描いています。
canvas.js
window.onload = function() {
// キャンバスとコンテキスト取得
var canvas = document.querySelector('#no');
var context = canvas.getContext('2d');
// 塗りつぶし
context.fillStyle = 'cyan';
context.fillRect(0, 0, 300, 300);
// 線を引く
context.strokeStyle = 'black';
context.lineWidth = 50;
var r = 100; // 半径
var c = 150; // 中心
var a = Math.PI/3-0.2;
var dx = r*Math.cos(a);
var dy = r*Math.sin(a);
var x = c + Math.floor(dx);
var y = c - Math.floor(dy);
// (直線の部分)
context.beginPath();
context.moveTo(x, y);
dx = (r+23)*Math.cos(a);
dy = (r+23)*Math.sin(a);
x = c - Math.floor(dx);
y = c + Math.floor(dy);
context.lineTo(x, y);
context.stroke();
// (円弧の部分)
context.beginPath();
context.arc(c, c, r, Math.PI*2/3, Math.PI/3, false);
context.stroke();
};
canvas.html
<script type="text/javascript" src="js/canvas.js"></script>
<canvas width="300" height="300" id="no"></canvas>