如何在 HTML5 画布上制作精灵副本？答案

【问题标题】：How to make a copy of a sprite on an HTML5 canvas?如何在 HTML5 画布上制作精灵副本？
【发布时间】：2015-09-03 23:17:42
【问题描述】：

我正在尝试使用 javascript 和 HTML5 画布制作一个 2-D 平台风格的游戏。在处理随机级别生成时，我偶然发现了一个问题。我的精灵工作正常，但是当我尝试加载下一个平台时，旧平台消失了。我想如果我复制图像会解决这个问题，但我不知道如何。我尝试在谷歌上搜索它，但我访问的大多数网站都不是很容易理解，或者与不同的问题有关。你能帮忙吗？

【问题讨论】：

需要显示数据存储方式的代码。
抱歉，我的代码有点乱。下次我会记得的……

标签： javascript html canvas

【解决方案1】：

复制图片很简单：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

function copy() {
    var imgData = ctx.getImageData(10, 10, 50, 50); 
    for (var i = 0; i < imgData.data.length; i += 4) {
        imgData.data[i] = 255 - imgData.data[i];
        imgData.data[i+1] = 255 - imgData.data[i+1];
        imgData.data[i+2] = 255 - imgData.data[i+2];
        imgData.data[i+3] = 255;
    }
    ctx.putImageData(imgData, 10, 70);
}

</script>

<button onclick="copy()">Copy</button>

</body>
</html>

此外，为了正确使用图像“getImageData”，我应该从本地主机开始我的页面。如果路径像 'D:/.../myPage.html' 这种方法不起作用。

【讨论】：

...或更简单地说：ctx.drawImage(c, 10,10,50,50, 10,70,50,50):jsfiddle.net/m1erickson/3n9y5u2b