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の円が描画されるはずなのですが、何も表示されませんでした。
どこかコードに誤りがあるのでしょうか?
よろしくお願いします。
No.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(); // ここで描画
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML5のcanvasで描画がされない
-
ユーザーが更新ボタンを押さな...
-
<a href="#" …>の意味を教えて...
-
bodyにidをつける理由は何ですか?
-
外部ファイル名を変数で指定で...
-
onLoadをbodyタグ以外で使用する
-
別ファイルのfunctionの読み込み方
-
Dreamweaver で 外部JSを読み込...
-
javascriptとApacheの設定
-
ひとつの外部ファイルに複数の...
-
JavaScriptでiframeの内容を「...
-
DreamWeaverでJS
-
テキストボックス内にハイパー...
-
javascriptでalertの文字列をコ...
-
getElementsByNameで要素が取得...
-
POSTで<a hrefを送る方法について
-
Smarty(tplファイル)でJavaScri...
-
変数の代入値を外部の.txtファ...
-
return falseが効かない(F5キ...
-
iPhone Safariの戻るボタンの挙動
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ユーザーが更新ボタンを押さな...
-
ウインドウを縮小しても文字を...
-
プルダウンと入力を両方行う検...
-
ランダムにページにアクセスしたい
-
HP上のPDFファイルを保存禁止...
-
更新日時を偽装したい。方法は...
-
HTMLタグでマウスポインタを変...
-
「街」や「428」や「かまいたち...
-
【SSI】include file、include ...
-
HTML5のcanvasで描画がされない
-
ページ毎に共通のメニューを表...
-
リンク先を広告ページ経由で表...
-
input TYPE="FILE"で取得した画...
-
a.htmlにあるテキストエリアに...
-
一定時間ごとにページ交代させたい
-
ifraameでのランダム表示時に不...
-
カウントダウンタイマー終了で...
-
htmlで記述されたWebページの解...
-
[html] リンク先のページのラジ...
-
showModalDialog内でのページ遷移
おすすめ情報