하나의 HTML 페이지에 여러 HTML 캔버스 요소 그리기

Question

하나 이상의 캔버스 요소를 추가하고 페이지로드시로드해야하는 html 페이지가 있습니다.

function draw() 
{ 
var c=document.getElementById("myCanvas"); 
var padding = 20; 
var ctx=c.getContext("2d"); 
var grd=ctx.createLinearGradient(0,0,175,50); 
grd.addColorStop(0,"#E05D1B"); 
grd.addColorStop(1,"#00FF00"); 
ctx.fillStyle=grd; 
ctx.fillRect(0,0,275,50); 
} 

<canvas id="myCanvas" width="250" height="8" style="margin-bottom:10px;margin-left:10px;"> 
<img src="images\gradient1.png" style="margin-bottom:10px;margin-left:10px;"/> 
</canvas> 

다른 ID로이 코드를 추가하지만 자바 스크립트를 다시 코딩해야합니다. 어떻게 줄일 수 있니?

이

<canvas id="myCanvas1" width="250" height="8" style="margin-bottom:10px;margin-left:10px;"> <img src="images\gradient1.png" style="margin-bottom:10px;margin-left:10px;"/> </canvas> 

Answer 1

당신은 당신의 그리기 기능 (fiddle)에 매개 변수로 별도의 캔버스 요소의 컨텍스트를 전달할 수 : 당신이 얼마나 많은 캔버스 요소에 따라

function draw(ctx) 
{ 
    var grd=ctx.createLinearGradient(0,0,175,50); 
    grd.addColorStop(0,"#E05D1B"); 
    grd.addColorStop(1,"#00FF00"); 
    ctx.fillStyle=grd; 
    ctx.fillRect(0,0,275,50); 
} 

draw(document.getElementById("canvas_1").getContext("2d")); 
draw(document.getElementById("canvas_2").getContext("2d")); 

또는, 더 할 수있다 루프에서 드로잉 함수를 호출하는 것이 효율적입니다 (fiddle) :

function draw(ctx) 
{ 
    var grd=ctx.createLinearGradient(0,0,175,50); 
    grd.addColorStop(0,"#E05D1B"); 
    grd.addColorStop(1,"#00FF00"); 
    ctx.fillStyle=grd; 
    ctx.fillRect(0,0,275,50); 
} 

var i = 1; 
while (document.getElementById("canvas_" + i)) { 
    draw(document.getElementById("canvas_" + i).getContext("2d")); 
    i ++;  
}