遞歸圖像處理（畫布，HTML5，Javascript）

Question

我正在嘗試使用Canvas進行分形算法，該算法需要先繪制一些東西，然后捕獲該圖像，繪制其一些變形的副本，然后捕獲該圖像，等等。但是，由於toDataURL（）似乎導致清除屏幕命令（“ clearRect”）或還原轉換矩陣命令（“ restore”）失敗。

下面的代碼旨在繪制一個黑色正方形，然后將畫布復制到名為“ 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>

Answer 1

如果您在頁面運行時查看javascript控制台，則會生成錯誤：

未捕獲的TypeError：類型錯誤

這是因為當drawImage函數需要圖像/畫布時，您試圖將字符串（圖像的dataURL版本）傳遞給drawImage 。

drawImage函數可以將canvas元素作為其參數，這將完成您想要的操作。

而不是做：

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

做就是了：

ctx.drawImage(canvas, 0,0);

遞歸圖像處理（畫布，HTML5，Javascript）

問題描述

1 個解決方案

解決方案1
6 2011-08-28 06:32:33

遞歸圖像處理（畫布，HTML5，Javascript）

問題描述

1 個解決方案

解決方案1 6 2011-08-28 06:32:33

解決方案1
6 2011-08-28 06:32:33