html5入門
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>

Copyright html5入門
All Rights Reserved.
html5入門

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>
canvasステップ2 円を描く:canvasのサンプル集