Форум

Moonshell · #1 (**permalink**) 27.01.2014, 18:30

Добрый вечер.
У меня была цель нарисовать такую штуку при помощи canvas + js;

Набросал такой код. Но он совсем не работает. С JS дело прежде не имел, так что вот.

function Maintenance() {
    var canvas = document.getElementById('canvas'); // получаем элемент
    var ctx = canvas.getContext('2d');              // получаем объект canvas
    canvas.height = 5000;                           // высота холста
    canvas.width = 5000;                            // ширина холста
    ctx.beginPath();
    ctx.moveTo(50, 50);                             //начальная точка

    ctx.lineWidth = 1;                              //толщина линии
    ctx.strokeStyle = "black";                      //цвет линии
    ctx.stroke();

    var point = {};
    var factor = {};
    factor.f = prompt("Enter first step");
    factor.s = prompt("Enter second step");
    point.x = prompt("Enter X");
    point.y = prompt("Enter Y");
    
    Painter(point, factor, ctx);
}

function Painter(point, factor, ctx) {
    ctx.lineTo(point.x += factor.x, point.y);          //сдвинули вправо
    ctx.lineTo(point.x, point.y += factor.y);          //сдвинули вниз
    ctx.lineTo(point.x -= (factor.x -= 10), point.y);  //сдвинули влево
    ctx.lineTo(point.x, point.y -= (factor.y -= 10));  //сдвинули вверз, в новую точку

    for (i = 50; i < point.x || i < point.y;) {
        Painter(point, factor, ctx);
    }

    ctx.stroke();
    var n = 50;
    var ask = point.x || point.y == n ? alert("Ok! X or Y =", n) : alert("Ok!")

}

Буду благодарен за помощь!

Яростный Меч · #2 (**permalink**) 27.01.2014, 19:27

картинку не видно.

animhotep · #3 (**permalink**) 27.01.2014, 19:30

для начала саму функцию запустить

window.onload = function(){
  Maintenance()
}

рони · #4 (**permalink**) 27.01.2014, 19:33

Moonshell,
основное потеряно изменение i строка 29,
странный самовызов функции строка 30,
строка 15 и 16 factor.f и factor.s скорее всего factor.x и factor.y и лучше сначала вычислить параметр а потом его применить строки 24 - 27

<!DOCTYPE HTML>
<html>
<head>
  <title>canvas</title>
  <meta charset="utf-8">
</head>

<body> <canvas id="canvas"></canvas>
<script>
  function Maintenance() {

    var point = {},
    factor = {};
    factor.x = 500;
    factor.y = 500;
    point.x = 10;
    point.y = 25;
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.height = 1E3;
    canvas.width = 1E3;
    ctx.beginPath();
    ctx.strokeStyle = "black";
    ctx.lineWidth = 5;
    ctx.moveTo(50, 50);
    for (var i = 0; i < 50; i++) {
        point.x += factor.x;
        ctx.lineTo(point.x, point.y);
        point.y += factor.y;
        ctx.lineTo(point.x, point.y);
        factor.x -= 10;
        point.x -= factor.x;
        ctx.lineTo(point.x, point.y);
        factor.y -= 10;
        point.y -= factor.y;
        ctx.lineTo(point.x, point.y)
    }
    ctx.stroke()
};
Maintenance()
</script>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript