2011-10-16 6 views
0

HTML 5 캔버스 및 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보다는 클래스에 적용 변경할 수있는 방법 단순한 캔버스를 작성하려면 코드인가?

답변

4

을 통해 루프 후 .each() JQuery와 클래스 선택기를 사용

// 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); 
}); 
+0

하지 – nvcode

+0

그것은 지금 내 canvas.height이 작동하지 않습니다하지만 왜 롤 볼 수 없습니다 작동하지 않습니다 – nvcode

+0

게시 한 코드에는'canvas.height'이 없지만 캔버스의 높이를 설정하려면 다음과 같이해야합니다 :'$ ('canvas.colorPicker'). each (function() {this.height = something;});' –

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