如何在画布上复制剪辑图像

下面的代码正常工作，但是如何才能制作“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

如何在画布上复制剪辑图像

回答

相关问题