|
T-фрактал на JS в canvas
Доброго дня. Дали на паре задание нарисовать T-фрактал в canvas JS. И у меня возникла проблема, ибо JS никогда прежде не изучала, а преподавательница мягко говоря не соизволила ничего объяснить. Нашла исходник, подогнала, но на мониторе сугубо черный экран. Подскажите в чем проблема и как исправить?
var canva = document.getElementById('canvas');
canva.width = window.innerWidth;
canva.height = window.innerHeight;
var ctx = canva.getContext('2d');
function clear() {
ctx.clearRect(0, 0, canva.width, canva.height);
ctx.fillStyle = 'rgba(0,0,0,1)';
ctx.fillRect(0, 0, canva.width, canva.height);
}
function PrintFigure(x, y, size, style) {
var sizeElem = Math.floor(size / N);
for (var i = 0; i < N; i++)
for (var k = 0; k < N; k++)
if (figure[i][k] == 1) {
ctx.fillStyle = style;
ctx.fillRect(x + i * sizeElem, y + k * sizeElem, sizeElem, sizeElem);
}
}
function CreateTFractal() {
var MAX_X = canva.width,
MAX_Y = canva.height;
clear();
var size = N;
var countByX = Math.floor(MAX_X / size),
countByY = Math.floor(MAX_Y / size);
while ((countByX > 0) && (countByY > 0)) { // пока рисунок помещается в область
for (var i = 0; i <= countByX; i++) {
for (var k = 0; k <= countByY; k++) {
PrintFigure(i * size, k * size, size, 'rgba(255, 255, 255, 0.3)');
} // k
} // i
size *= 2; // новый размер для следующей итерации
countByX = Math.floor(MAX_X / size),
countByY = Math.floor(MAX_Y / size);
}
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Draw (canvas version)</title>
</head>
<body onload="CreateTFractal()">
<canvas id="canvas"></canvas>
Please use a browser that supports "canvas"
<script src="new1.js"></script>
</body>
</html>
|