Question

我正在尝试制作画布动画：

var context;
var meter;
var pin;

function init() {
    var meter = new Image();
    var pin = new Image();
    var context = document.getElementById('canvas').getContext('2d');
    meter.src = 'background.png';
    pin.src = 'needle.png';
    context.drawImage(meter,0,0);
    context.translate(275,297);
    context.save();
    setTimeout(startup,500);
}

function startup() {
    var r=2;    // set rpm here.
    var i=r*36-27;
    var angleInRadians = 3.14159265 * i/180;  //converting degree to radian                
    context.rotate(angleInRadians); //rotating by angle
    context.drawImage(pin,-250,-3);  //adjusting pin center at meter center
    context.restore();
}

您可以在http://www.kingoslo.com/instruments/

看到该脚本

使用firebug我得到错误，说上下文未定义，我认为这很奇怪。

感谢。

亲切的问候，的Marius

Answer 1

这可能是因为你在init（）函数中使用了“var”，这使得 new “context”变量在该函数的本地变量而不是向全局函数添加定义。所以只需在init（）函数中的“context”之前删除“var”，它应该可以工作。你应该将var放在仪表前面并固定销钉。

Answer 2

var context = document.getElementById('canvas').getContext('2d');

您在此处声明另一个本地变量context，该变量仅在init内有效。 “外部”context保留其值undefined。移除var，它将分配给外部context。

Answer 3

您已将上下文定义为init（）函数中的局部变量，因此全局范围的上下文变量始终为null。改变这一行：

var context = document.getElementById('canvas').getContext('2d');

以

context = document.getElementById('canvas').getContext('2d');

JS：为什么这个变量不能用于其他功能？

3 个答案: