我正在尝试使用 Canvas 进行分形算法，该算法需要绘制一些东西，然后捕获该图像，绘制它的一些损坏的副本，然后捕获该图像，等等。我但遇到了问题，因为 toDataURL() 似乎导致清屏命令(“clearRect”)或恢复转换矩阵命令(“restore”)失败。
下面的代码旨在绘制一个黑色正方形，然后将 Canvas 复制到名为“img”的变量中，向下和向右平移，然后将“img”粘贴到新位置。结果应该是两个正方形。但相反，它是第一个 1 个方格，然后是 2 个方格，然后是 3 个方格，然后是 4 个……(然后它超出了范围，但大概它仍然在复制页面上的方格。)
任何帮助将非常非常感谢。
这里是正在运行的代码的链接:https://www.msu.edu/~brown202/dataURLproblem.html
代码如下:
<html>
<head>
<script type="application/x-javascript">
function draw() {
var canvas = document.getElementById("fractal");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
var img;
ctx.clearRect(0,0,400,400); // clear the canvas, which measures 400 by 400
ctx.fillRect (0,0,100,100); // draw a square
ctx.save();
img = canvas.toDataURL(); // store the canvas image in "img"
ctx.translate(100,100); // shift picture
ctx.drawImage(img, 0,0); // draw the stored image of the canvas in the new place
ctx.restore();
}
}
function init() {
setInterval(draw,500); // repeat every 500 ms.
}
</script>
</head>
<body onload="init();">
<canvas id="fractal" width="400" height="400">
<p>This animation requires a browser that supports the
<a href="http://www.w3.org/html/wg/html5/">HTML5</a>
<canvas> feature.</p>
</canvas>
</body>
</html>
最佳答案
如果您在页面运行时查看 JavaScript 控制台，它会生成错误:
Uncaught TypeError: Type error
这是因为当 drawImage 函数运行时，您尝试将字符串(图像的 dataURL 版本)传递给 drawImage期待图像/ Canvas 。
drawImage 函数可以接受 canvas 元素作为其参数，这将执行您想要的操作。
而不是这样做:
img = canvas.toDataURL();
ctx.drawImage(img, 0,0);
就这样做:
ctx.drawImage(canvas, 0,0);
关于javascript - 递归图像处理(Canvas、HTML5、Javascript)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7219268/