HTML5のcanvasで描画がされない

解決済

質問者：butamushi
質問日時：2014/06/22 22:13
回答数：1件

HTML5のcanvas要素を使って描画をしようとしたのですが、図形が表示されません。
コードは以下の通りです。

・index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvasで図形を描く</title>
<script type="text/javascript" src="paint.js"></script>
</head>
<body onLoad="draw()">
<canvas id="mycanvas"width="800" height"800">
</canvas>
</body>
</html>

・paint.js

function draw() {
//描画コンテキストの取得
var canvas = document.getElementById('mycanvas');
if (canvas.getContext) {

var ctx = canvas.getContext('2d');
ctx.arc(180,150,20,Math.PI*1,Math.PI*2,true);

}
}

このコードでは(180,150)の位置に半径20の円が描画されるはずなのですが、何も表示されませんでした。
どこかコードに誤りがあるのでしょうか？

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： shylock
回答日時：2014/06/23 00:15

arcは、パスを指定して描画するものなので、beginPathしてから描画した後にclosePathし、それからfillなどの描画メソッドを呼び出す形になると思います。

こんな感じ。

if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(180,150,20,Math.PI*1,Math.PI*2,true);
ctx.closePath();
ctx.fill(); // ここで描画
}