html5入門html5のサンプル集canvasのサンプル集

canvasステップ2 円を描く


サンプルコードの表示結果

ソースコード

<canvas id="c1" width="140" height="140"></canvas>
<script type="text/javascript">
onload = function() {
draw1();
};
/* 円を描く */
function draw1() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(70, 70, 60, 0, Math.PI*2, false);
ctx.stroke();
}
</script>