みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

JavaScript 用 Canvas の使用法

先日JQuery について質問させていただいたものです。
Canvas を使ってブラウザ画面にグラフィックを描く練習を始めましたが、IEではグラフィックが描けません。
ネットで見つけたthinkit というサイトの説明にしたがって最初のサンプルコードを書いてみましたが、firefox ではグラフィックが描けるのにIEでは何も起こりません。
説明によるとIEには excanvas.js というライブラリーを用意しなくてはならないということで、これもちゃんとダウンロードして解凍済みですし、HTML コードのコメントとしてIEを使っているならこのファイルをインクルードする旨も書いてあります。
下にプログラムのソースコードを載せます。
どなたか問題解決のヒントを教えていただけないでしょうか?

HTML ファイル

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>canvas with JavaScript</title>
<!-- [if IE]> <script type="text/javascript" src="excanvas.js">
</script><![endif]-->
<script type="text/javascript" src="draw2.js"></script>
</head>

<body >
A canvas appears here.</br>
<canvas id="sample" width="300" height="200"></canvas>
</body>
</html>

JavaScript を記述したファイル

//canvas program with javascript
// draw2.js

window.onload=function()
{
var canvas=document.getElementById('sample');
var ctx=canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(15,15);
ctx.lineTo(60,70);
ctx.stroke();
};

ちなみに私が見つけたサイトのアドレスは次のとおりです。
http://thinkit.co.jp/article/60/1/

投稿日時 - 2012-10-01 10:49:38

QNo.7726320

すぐに回答ほしいです

質問者が選んだベストアンサー

質問の HTML ソースコードがコピー&ペーストならこれかも。

× <!-- [if IE]……
○ <!--[if IE]……

http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx

投稿日時 - 2012-10-01 12:58:14

お礼

早速のご回答ありがとうございます。
問題解決いたしました。
スペースひとつのあるなしで、大きな違いになるのですね。
参考にしたサイトからはコピー&ペーストは無理だったので自分でキーをたたいて入力したものでしたが、そのときに間違ったかもしれません。

投稿日時 - 2012-10-01 21:14:40

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問