※ ChatGPTを利用し、要約された質問です（原文：JavaScript 用 Canvas の使用法）
JavaScript 用 Canvas の使用法
このQ&Aのポイント
JavaScript の Canvas を使ってブラウザ画面にグラフィックを描く方法について学びました。
IEではグラフィックが描けない問題が発生しましたが、解決策として excanvas.js ライブラリーの使用を調査しました。
また、thinkit というサイトで詳しい解説があり、具体的なコードのサンプルもあります。
先日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/
お礼
早速のご回答ありがとうございます。 問題解決いたしました。 スペースひとつのあるなしで、大きな違いになるのですね。 参考にしたサイトからはコピー＆ペーストは無理だったので自分でキーをたたいて入力したものでしたが、そのときに間違ったかもしれません。