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>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について