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); 

改變這種將它應用到一類，而不是一個ID，我想了很多時間在一個頁面上的任何方式？

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); 
} 
);