HTML5 の Canvas を使うことで HTML の画面内にコンテキストを利用した図形を比較的自由に描くことができるようになります。この機能の1つである arc() 関数を使うと、下図のような「円の弧」を描画できます(塗りつぶすかどうかは選択できます):
この弧を描く際のコードは以下のようなものです:
で、このような図形を描くのが目的であればいいのですが、パックマンのような(円からピザの一部を切り取ったような)画像を描きたい場合はこれでは目的の画像とは異なります。なんとかしてパックマン型に塗りつぶした弧を描く方法はないでしょうか? というのが今回のテーマです。
結論としては可能で、「arc() 関数の実行直後に円中心に向かって直線を引く」のがその答えになります:
これでパックマンが描画できました:
この弧を描く際のコードは以下のようなものです:
: <script> var canvas1 = document.getElementById( 'myCanvas1' ); if( !canvas1 || !canvas1.getContext ){ return false; } var ctx1 = canvas1.getContext( '2d' ); //. 円の情報 var r = 80; var x0 = 100; var y0 = 100; var deg = 190; ctx1.beginPath(); ctx1.arc( x0, y0, r, -90 * Math.PI / 180, deg * Math.PI / 180, false ); ctx1.fillStyle = "rgba( 255, 128, 128, 0.8 )"; ctx1.fill(); </script> <body> <canvas id="myCanvas1"></canvas> </body> :
で、このような図形を描くのが目的であればいいのですが、パックマンのような(円からピザの一部を切り取ったような)画像を描きたい場合はこれでは目的の画像とは異なります。なんとかしてパックマン型に塗りつぶした弧を描く方法はないでしょうか? というのが今回のテーマです。
結論としては可能で、「arc() 関数の実行直後に円中心に向かって直線を引く」のがその答えになります:
:
<script>
var canvas1 = document.getElementById( 'myCanvas1' );
if( !canvas1 || !canvas1.getContext ){
return false;
}
var ctx1 = canvas1.getContext( '2d' );
//. 円の情報
var r = 80;
var x0 = 100;
var y0 = 100;
var deg = 190;
ctx1.beginPath();
ctx1.arc( x0, y0, r, -90 * Math.PI / 180, deg * Math.PI / 180, false );
ctx1.lineTo( x0, y0 );
ctx1.fillStyle = "rgba( 255, 128, 128, 0.8 )";
ctx1.fill();
</script>
<body>
<canvas id="myCanvas1"></canvas>
</body>
:
これでパックマンが描画できました:
コメント