如何在畫布上覆制剪輯圖像

下面的代碼正常工作，但是如何才能製作「StopLicht」的副本並在畫布的其他位置放置副本？如何在畫布上覆制剪輯圖像

<!DOCTYPE html> 
<html> 
<body> 
<p>Image to use:</p> 
<img id="sprite-sheet" src="logi.bmp" alt="Logi" width="220" height="277"> 
<p>Canvas:</p> 
<canvas id="myCanvas" width="512" height="380" style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 
<script> 
var canvas = document.getElementById('myCanvas'); 
var ctx = canvas.getContext('2d'); 
var img = document.getElementById("sprite-sheet"); 
    function StopLicht() { 
//rij x groen stoplicht 
ctx.drawImage(img, 64, 8,8,8,80, 0,8,8); 
ctx.drawImage(img, 72, 8,8,8,88, 0,8,8); 
ctx.drawImage(img, 80, 8,8,8,80, 8,8,8); 
ctx.drawImage(img, 88, 8,8,8,88, 8,8,8); 
ctx.drawImage(img,112,24,8,8,80,16,8,8); 
ctx.drawImage(img,120,24,8,8,88,16,8,8); 
ctx.drawImage(img, 96, 8,8,8,80,24,8,8); 
ctx.drawImage(img,104, 8,8,8,88,24,8,8); 
} 
StopLicht(); //geef het stoplicht weer. en is goed ! 
</script> 
</body> 
</html>

來源

2014-03-24 user3454849

是的，你可以用帆布轉化爲你的紅綠燈重新定位到任意x，在畫布上y位置：

context.translate（X，Y）將移到畫布原點（0， 0）到x，y。

這意味着你可以在不改變每個x，y位置的情況下對現有的drawImage命令進行修改。

function StopLicht(x,y) { 

    //save the untransformed context state 
    ctx.save(); 

    // move the canvas to the desired xy coordinate 
    ctx.translate(x,y); 

    //rij x groen stoplicht 
    ctx.drawImage(img, 64, 8,8,8,80, 0,8,8); 
    ctx.drawImage(img, 72, 8,8,8,88, 0,8,8); 
    ctx.drawImage(img, 80, 8,8,8,80, 8,8,8); 
    ctx.drawImage(img, 88, 8,8,8,88, 8,8,8); 
    ctx.drawImage(img,112,24,8,8,80,16,8,8); 
    ctx.drawImage(img,120,24,8,8,88,16,8,8); 
    ctx.drawImage(img, 96, 8,8,8,80,24,8,8); 
    ctx.drawImage(img,104, 8,8,8,88,24,8,8); 

    // restore the context to its untransformed state 
    ctx.restore(); 

}

[此外：用法示例]

這個循環將打印2行10個燈：

for(var row=0;row<2;row++){ 
for(var col=0;col<10;col++){ 
    StopLicht(row*12,col*12); 
}}

來源

2014-03-24 17:06:41 markE

嗨，馬克，感謝您的回答。但這不是我所期望的。很高興知道「翻譯」以重新定位。我需要的是我的畫布上有兩個「StopLicht」。原件和副本有些東西。這是背景部分之一。所以我需要FG：10行「StopLicht」和fg 2行。 Erik – user3454849

您可以多次調用StopLicht來繪製多個燈光。看到我的答案的補充。祝你的項目好運！ – markE

如何在畫布上覆制剪輯圖像

回答

相關問題