Я пытаюсь использовать 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>
<canvas> feature.</p>
</canvas>
</body>
</html>