HTML5 Canvas -按类在所有Canvas元素中绘制相同的东西

HTML5 Canvas - draw the same thing in all canvas elements by class

本文关键字：Canvas 绘制 HTML5 元素      更新时间：2023-09-26

我有以下HTML…

<body onload="draw();">
  <p><a href=""><canvas class="demo2" width="6" height="12">Fallback</canvas> Back to (1)...</a></p>
  <p><a href=""><canvas class="demo2" width="6" height="12">Fallback</canvas> Back to (2)...</a></p>
</body>

…和javascript: 

function draw() {        
    var canvas2 = $('.demo2').get(0); // This draws in the first canvas
    //var canvas2 = $('.demo2').get(); This doesn't draw at all
    if (canvas2.getContext) {
        var ctx2 = canvas2.getContext('2d');
        ctx2.beginPath();
        ctx2.moveTo(6,0);
        ctx2.lineTo(6,12);
        ctx2.lineTo(0,6);
        ctx2.fillStyle = 'rgb(0,100,220)';
        ctx2.fill();
    }
}

我想要发生的是所有的画布与类demo2绘制。

我认为$('.demo2').get()将通过该类名获得所有元素。$('.demo2').get(0)画了第一个，但我想把它们都画进去。

在http://jsfiddle.net/kMN3s/演示

您可以使用.each来执行每个.demo2的事情:http://jsfiddle.net/kMN3s/2/。

function draw() {        
    $('.demo2').each(function() {
        if (this.getContext) { // `this` is an element each time
            var ctx2 = this.getContext('2d');
            ctx2.beginPath();
            ctx2.moveTo(6,0);
            ctx2.lineTo(6,12);
            ctx2.lineTo(0,6);
            ctx2.fillStyle = 'rgb(0,100,220)';
            ctx2.fill();
        }
    });
}

更新demo http://jsfiddle.net/kMN3s/1/

$('canvas.demo2').each(function() { }
相关文章：