HTML5 Canvas - сделать то же самое во всех элементах холст классом

У меня есть следующие HTML ...HTML5 Canvas - сделать то же самое во всех элементах холст классом

<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) рисует в первом, но я хотел бы привлечь их всех.

Demo в http://jsfiddle.net/kMN3s/

источник

2011-12-16 Scott Brown

Вы можете использовать .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(); 
     } 
    }); 
}

источник

2011-12-16 10:24:59 pimvdb

Brilliant, спасибо. –

Обновлено демо http://jsfiddle.net/kMN3s/1/

$('canvas.demo2').each(function() { }

источник

2011-12-16 10:25:37 Stefan

+1 Это здорово, спасибо. @pimvdb попал туда прямо перед вами, поэтому я даю ему «прием». –

HTML5 Canvas - сделать то же самое во всех элементах холст классом

ответ

Смежные вопросы