オンライン健康相談、gooドクター

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の円が描画されるはずなのですが、何も表示されませんでした。
どこかコードに誤りがあるのでしょうか?

よろしくお願いします。

gooドクター

A 回答 (1件)

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(); // ここで描画
}
    • good
    • 1

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング