0

次のコードを実行しようとすると、Windows8にvs2012をインストールし、Windows8用のサンプルJavaScriptアプリを作成します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App1</title>

<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

<!-- App1 references -->
<script src="js/jquery-1.5.1.min.js"></script>
<link href="/css/default.css" rel="stylesheet" />

<script src="/js/default.js"></script>
  <script type="text/javascript" >
      var c = $("myCanvas");
      var ctx = c.getContext("2d");
      var grd = ctx.createLinearGradient(0, 0, 175, 50);
      grd.addColorStop(0, "#000000");
      grd.addColorStop(1, "#00FF00");
      ctx.fillStyle = grd;
      ctx.fillRect(0, 0, 150, 75);
</script>
</head>
<body>
<form>
    <input type="url" />
    <input type="submit" value="ok" />
    <canvas id="myCanvas" width="200" height="200">
        Your browser doesn't support canvas
    </canvas>
</form>

次の例外を与える

Unhandled exception at line 19, column 11 in ms-appx://ce20ab64-b644-451a-a60f-cafdc7afb4f9/default.html

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'getContext'

If there is a handler for this exception, the program may be safely continued.
4

2 に答える 2

2

変化する

var c = $("myCanvas");

に

var c = document.getElementById("myCanvas");

その後

var ctx = c.getContext("2d");

jQueryを使用して$（'＃myCanvas'）。get（0）で要素を取得し、実際のHTML要素オブジェクトにアクセスできます。ただし、標準のドキュメントAPIはここでも同様に機能します。

http://diveintohtml5.info/canvas.html

アップデート：

で準備ができているドキュメントにコードをラップする

$(function(){
    //code here
});
于 2012-11-27T18:06:00.587 に答える
-1

変化する

var c = $("myCanvas");

に

var c = $("#myCanvas");
于 2015-06-19T16:34:00.930 に答える