递归图像处理

我想要使用Canvas的分形算法，需要一个绘制的东西，然后捕获该图像，绘制一些它的损坏的副本，然后捕获，图像，等我遇到一个问题，但是，因为toDataURL（）似乎无论是在清屏命令（“clearRect”）或恢复变换矩阵命令（“恢复”）是造成失败。递归图像处理

下面的代码的目的是绘制一个黑色的正方形，然后在画布上复制到一个名为“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> 
       &lt;canvas&gt; feature.</p> 
      </canvas> 
     </body> 
    </html>

来源

2011-08-28 Jeffrey Benjamin Brown

你传递'draw'到'setInterval'所以它会永远调用它。你到底想做什么？只画两个方格？ –

是的，这是故意的。它每500毫秒重绘一次场景。它应该每次绘制相同的图片 - 只有两个方块。但是每次调用它时都会添加一个正方形。 –

你想让它只绘制相同的两个方块吗？或更小的广场？你想画什么样的人物？ –

如果你看看你的网页运行时的JavaScript控制台，它产生错误：

Uncaught TypeError: Type error

这是因为你想一个字符串（dataURL版本的图像）传递给drawImage当drawImage函数期待图像/画布。

drawImage函数可以采用一个canvas元素作为它的参数，它会做你想做的。

而不是做的：

img = canvas.toDataURL(); 
ctx.drawImage(img, 0,0);

只要做到：

ctx.drawImage(canvas, 0,0);

来源

2011-08-28 06:32:33 jimr

下面是它小提琴（以较小的方形为了好玩）：http://jsfiddle.net/r7veu/（+1至jimr） –

辉煌！非常感谢。 –

递归图像处理

回答

相关问题