1

我想多次使用这个 camvas 对象，但我只能在引用#ID 时让它工作。这是我的代码

function bubbleArrow() {
    var canvasId = 'triangleTwo',
      canvas = document.getElementById(canvasId),
      ctx = canvas.getContext('2d');
    // Draw triangle
    ctx.fillStyle="#f0f1f1";
    ctx.beginPath();
    // Draw a triangle location for each corner from x:y 100,110 -> 200,10 -> 300,110 (it will return to first point)
    ctx.moveTo(100,110);
    ctx.lineTo(100,150);
    ctx.lineTo(150,110);
    ctx.closePath();
    ctx.fill();
}

当我只需要使用一次时，这很好用。我想通过 className 引用我的画布，以便在我的 dom 中多次使用它。

    function bubbleArrow() {
    var canvasName = $('.triangleTwo'),
      ctx = canvas.getContext('2d');
    ctx.fillStyle="#f0f1f1";
    ctx.beginPath();
    ctx.moveTo(100,110);
    ctx.lineTo(100,150);
    ctx.lineTo(150,110);
    ctx.closePath();
    ctx.fill();
}

请任何帮助说明为什么当我通过类名定位我的画布时它不会工作，但在通过#id 定位它时会工作。谢谢

4

1 回答 1

5

你可以尝试这样的事情：

var canvases = document.getElementsByClassName('triangleTwo')
for (var i = 0; i < canvases.length; i ++) {
    var ctx = canvases[i].getContext('2d')
    // do stuff
}

或者，使用 jQuery：

$('.triangleTwo').each(function() {
    var ctx = this.getContext('2d')
    // stuff
})
于 2013-10-07T23:31:19.310 回答