1

我正在尝试在 Windows 8 开发中心完成本教程：http: //msdn.microsoft.com/en-us/library/windows/apps/xaml/hh452750.aspx

但是还没迈出第一步。在我的 HTML5 文件中，我有：

<canvas id="can1" width="500" height="500"></canvas>

在我的 JavaScript 文件中，我有：

var myCanvas = document.getElementById("can1");
var myContext = myCanvas.getContext("2d");

我正在使用适用于 Windows 8 的 Visual Studio Express 2012。我收到以下错误：“0x800a138f - JavaScript 运行时错误：无法获取未定义或空引用的属性 'getContext'”

这正是本教程所说的。为什么我会收到错误消息？

4

1 回答 1

3

如果您使用的是空白模板（如您的评论中所述），那么将建议的演示代码放在 onactivate 事件中应该可以工作。下面应该显示从黑框的左上角到右下角的白线。

在 default.html 中：

<body>
    <p>Content goes here</p>
    <canvas id="can1" width="500" height="500"></canvas>
</body>

在 default.js 中，在 app.onactivated 方法中：

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // TODO: This application has been newly launched. Initialize
            // your application here.
        } else {
            // TODO: This application has been reactivated from suspension.
            // Restore application state here.
        }

        var myCanvas = document.getElementById("can1");
        var myContext = myCanvas.getContext("2d");

        myContext.fillStyle = '#000';
        myContext.strokeStyle = '#fff';
        myContext.fillRect(0, 0, 500, 500);
        myContext.lineWidth = 3;
        myContext.fill();

        myContext.moveTo(0, 0);
        myContext.lineTo(500, 500);
        myContext.stroke();

        args.setPromise(WinJS.UI.processAll());
    }
};
于 2012-12-02T06:33:02.133 回答