Question

我是JavaScript的初学者，我正在学习用画布绘画。

我已经制作了绘制圆圈的功能，此时一切都很好。

var dibujo, lienzo;
function inicio()
{
 dibujarGrilla(lienzo);

 dibujo = document.getElementById('dibujito');
 lienzo = dibujo.getContext('2d');

 lienzo.moveTo(0,0);
 lienzo.lineTo(300,1);
 lienzo.lineTo(300,300);
 lienzo.lineTo(1,300);
 lienzo.lineTo(0,0);
 lienzo.strokeStyle = '#f00';
 lienzo.stroke();

 lienzo.beginPath();
 lienzo.strokeStyle = '#00f';
 lienzo.arc(150,150,100,(Math.PI * 2),false);
 lienzo.closePath();
 lienzo.stroke();

}

然后我有一个绘制一些网格的功能：

function dibujarGrilla(l) {
    var ancho = 300, alto = 300;
    var linea;
    for (linea = 0; linea < 10; linea++){
        lienzo.beginPath();
        lienzo.strokeStyle = '#aaa';
        lienzo.moveTo(linea * 10, 0);
        lienzo.lineTo(linea * 10, 300)
        lienzo.closePath();
        lienzo.stroke();
    }

}

function dibujarGrilla(l)：

此时出现错误

lienzo.beginPath(); 

Uncaught TypeError: Cannot read property 'beginPath' of undefined

Answer 1

初始化dibujarGrilla(lienzo)后调用lienzo：

var dibujo, lienzo;
function inicio()
{

 dibujo = document.getElementById('dibujito');
 lienzo = dibujo.getContext('2d');

 dibujarGrilla(lienzo);

 lienzo.moveTo(0,0);
 lienzo.lineTo(300,1);
 lienzo.lineTo(300,300);
 lienzo.lineTo(1,300);
 lienzo.lineTo(0,0);
 lienzo.strokeStyle = '#f00';
 lienzo.stroke();

 lienzo.beginPath();
 lienzo.strokeStyle = '#00f';
 lienzo.arc(150,150,100,(Math.PI * 2),false);
 lienzo.closePath();
 lienzo.stroke();

}

Answer 2

由于您已将函数override func viewDidLoad() { super.viewDidLoad() self.navigationController?.delegate = self }调用为初始化dibujarGrilla(lienzo)，因此它会给出错误。初始化lienzo

后调用它

试试这段代码：

lienzo = dibujo.getContext('2d');

Answer 3

函数inicio可以阅读lienzo，我们不知道dibujarGrilla是否可以阅读lienzo。

这是一个闭包变量问题，您可以通过ejohn javascript ninja

了解更多有关javascript闭包的信息

未捕获的TypeError：无法读取未定义的属性“beginPath”

3 个答案: