[HTML]
<form>
<input type="button" value="描画ボタン">
</form>
<div class="box">
<div>
<p class="msg">円を描く</p>
<canvas id="canvas1" width="300" height="300"></canvas>
</div>
<div>
<p class="msg">円弧を描く</p>
<canvas id="canvas2" width="300" height="300"></canvas>
</div>
</div>
<div class="box">
<div>
<p class="msg">円弧を塗りつぶす(10度から80度、反時計回り）</p>
<canvas id="canvas3" width="300" height="300"></canvas>
</div>
<div>
<p class="msg">円弧を塗りつぶす-2(10度から80度、時計回り）</p>
<canvas id="canvas4" width="300" height="300"></canvas>
</div>
</div>
[JavaScript]
document.addEventListener('DOMContentLoaded',function(){
var exec = document.querySelector('input[type="button"]');
exec.addEventListener("click", function() {
draw1();
draw2();
draw3();
draw4();
},false);
},false);
/* 円を描く */
function draw1() {
var canvas = document.querySelector('#canvas1');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
ctx.beginPath();
/* 座標 (150, 150) が中心で半径100ピクセルの円を基準に、0°の位置から時計回りに360°回転して描かれた円を描く */
ctx.arc(150, 150, 100, 0, Math.PI*2, false);
ctx.stroke(); // 線を描く
}
/* 円弧を描く */
function draw2() {
var canvas = document.querySelector('#canvas2');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
ctx.beginPath();
/* 座標 (150, 150) が中心で半径100ピクセルの円を基準に、10°の位置から反時計回り（左回り）に80°の位置までの円弧を表す。*/
ctx.arc(150, 150, 100, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
ctx.stroke(); // 線を描く
}
/* 円弧を塗りつぶす */
function draw3() {
var canvas = document.querySelector('#canvas3');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
ctx.beginPath();
/* 先ほどの円弧を色をつけて塗りつぶす。*/
ctx.arc(150, 150, 100, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
ctx.fillStyle = 'rgb(192, 80, 77)'; // 色をつける
ctx.fill(); // 塗りつぶす
}
/* 円弧を塗りつぶす-2 */
function draw4() {
var canvas = document.querySelector('#canvas4');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
ctx.beginPath();
/* 円弧を色をつけて塗りつぶす。*/
ctx.arc(150, 150, 100, 10 * Math.PI / 180, 80 * Math.PI / 180, false);
ctx.fillStyle = 'rgb(192, 80, 77)'; // 色をつける
ctx.fill(); // 塗りつぶす
}