2011-08-28 92 views
1

我想要使用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> 
+0

你傳遞'draw'到'setInterval'所以它會永遠調用它。你到底想做什麼?只畫兩個方格? –

+0

是的,這是故意的。它每500毫秒重繪一次場景。它應該每次繪製相同的圖片 - 只有兩個方塊。但是每次調用它時都會添加一個正方形。 –

+0

你想讓它只繪製相同的兩個方塊嗎?或更小的廣場?你想畫什麼樣的人物? –

回答

5

如果你看看你的網頁運行時的JavaScript控制檯,它產生錯誤:

Uncaught TypeError: Type error

這是因爲你想一個字符串(dataURL版本的圖像)傳遞給drawImagedrawImage函數期待圖像/畫布。

drawImage函數可以採用一個canvas元素作爲它的參數,它會做你想做的。

而不是做的:

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

只要做到:

ctx.drawImage(canvas, 0,0); 
+0

下面是它小提琴(以較小的方形爲了好玩):http://jsfiddle.net/r7veu/(+1至jimr) –

+0

輝煌!非常感謝。 –