HTML 5 холст и JQuery?

Question

Вот мой код для создания простого холста,

var canvas1 = document.getElementById('colorPicker').getContext('2d');
gradient1 = canvas1.createLinearGradient(0, 0, colorPicker.width, colorPicker.height);
gradient1.addColorStop(0, 'rgb(255, 255, 255)');
gradient1.addColorStop(1, 'rgb(0, 0, 0)');
canvas1.fillStyle = gradient1;
canvas1.fillRect(0, 0, 500, 500);

Есть ли способ изменить это, чтобы применить его к классу, а не к идентификатору, как я хочу много раз на одной странице?

Answer 1

Используйте селектор класса jQuery, затем .each() для циклического просмотра:

// Assumes colorPicker already exists
$('canvas.colorPicker').each(function(){
    var canvas1 = this.getContext('2d');
    gradient1 = canvas1.createLinearGradient(0, 0, colorPicker.width, colorPicker.height);
    gradient1.addColorStop(0, 'rgb(255, 255, 255)');
    gradient1.addColorStop(1, 'rgb(0, 0, 0)');
    canvas1.fillStyle = gradient1;
    canvas1.fillRect(0, 0, 500, 500);
});

Answer 2

$(".myclass").each(
function() {
  this.getContext('2d');
  gradient1 = canvas1.createLinearGradient(0, 0, colorPicker.width, colorPicker.height);
  gradient1.addColorStop(0, 'rgb(255, 255, 255)');
  gradient1.addColorStop(1, 'rgb(0, 0, 0)');
  canvas1.fillStyle = gradient1;
  canvas1.fillRect(0, 0, 500, 500);
}
);