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

Stack Overflow用户

提问于 2014-03-24 18:27:30

回答 1查看 105关注 0票数 0

下面的代码运行良好，但我如何复制"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>

html

html5-canvas

回答 1

Stack Overflow用户

发布于 2014-03-25 01:06:42

可以，您可以使用canvas translate将信号灯重新定位到canvas上的任何x，y位置：

context.translate(x，y)会将画布原点(0，0)移动到x，y。

这意味着您可以使用现有的drawImage命令，而无需更改每个命令的x，y位置。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22606696

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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