javascript - HTML 5 canvas和jquery？

这是我创建一个简单画布的代码，

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？

最佳答案

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