HTML5 Canvasで絵を描く
HTML5のCanvasでブラウザ上に2Dのグラフィックスを生成
どこかで見た覚えのある鳥の絵をHTML5 Canvasで再現。
jQuery
$(function () {
$(document).ready(function () {
draw();
});
function draw() {
var ctx = $('#' + arg['id'])[0].getContext('2d');
// 体
// パス始まり
ctx.beginPath();
// 座標指定
ctx.moveTo(67.766,6.878);
// ベジェ曲線描画
ctx.bezierCurveTo(53.403,15.019,44.243,24.65,44.243,31.605);
ctx.bezierCurveTo(44.243,37.621,42.755,37.617,35.079,31.582);
ctx.bezierCurveTo(23.79,22.703,10.165,25.91,3.403,39.033);
ctx.bezierCurveTo(-1.32,48.195,-1.32,48.195,4.622,49.681);
ctx.bezierCurveTo(7.407,50.376,11.474,54.384,13.911,58.841);
ctx.bezierCurveTo(28.95,86.33,53.77,95.4,78.661,82.509);
ctx.bezierCurveTo(94.755,74.173,109.247,50.595,105.071,39.527);
ctx.bezierCurveTo(103.86,36.316,103.051,36.367,99.091,39.9);
ctx.bezierCurveTo(96.63,42.091,92.157,43.986,89.431,43.986);
ctx.bezierCurveTo(84.521,43.986,84.478,43.738,88.154,36.308);
ctx.bezierCurveTo(92.084,28.357,91.154,13.281,86.146,3.87);
ctx.bezierCurveTo(83.165,-1.733,82.872,-1.684,67.766,6.878);
// 塗りつぶしスタイル
ctx.fillStyle = '#00cffe';
// 塗りつぶし
ctx.fill();
// パス終わり
ctx.closePath();
// 目
ctx.beginPath();
// 円描画
ctx.arc(18,38,5,0,Math.PI*2,false);
ctx.fillStyle = '#fff';
ctx.fill();
ctx.closePath();
// 羽
ctx.beginPath();
ctx.moveTo(78.907,23.679);
ctx.bezierCurveTo(78.907,34.327,77.469,37.064,69.747,41.12);
ctx.bezierCurveTo(58.356,47.1,49.036,34.069,57.274,23.679);
ctx.bezierCurveTo(61.2,18.728,74.575,11.853,77.176,13.45);
ctx.bezierCurveTo(78.11,14.029,78.907,18.728,78.907,23.679);
ctx.fillStyle = '#fff';
ctx.fill();
ctx.closePath();
}
});
HTML
<canvas id="canvas" width="110" height="90"></canvas>
サンプル
