Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.01.2014, 17:30
Новичок на форуме
Отправить личное сообщение для Moonshell Посмотреть профиль Найти все сообщения от Moonshell
 
Регистрация: 27.01.2014
Сообщений: 7

Отрисовка спирали. Canvas.
Добрый вечер.
У меня была цель нарисовать такую штуку при помощи 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, 18:27
Профессор
Отправить личное сообщение для Яростный Меч Посмотреть профиль Найти все сообщения от Яростный Меч
 
Регистрация: 12.04.2010
Сообщений: 557

картинку не видно.
Ответить с цитированием
  #3 (permalink)  
Старый 27.01.2014, 18:30
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

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

window.onload = function(){
  Maintenance()
}
Ответить с цитированием
  #4 (permalink)  
Старый 27.01.2014, 18:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,267

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Рисование линий на JS без canvas grego Events/DOM/Window 3 17.10.2013 11:34
отрисовка большого кол-ва картинок на canvas cyber Events/DOM/Window 18 04.11.2012 23:24
Почему неправильно вырисовывается canvas? Amateur Events/DOM/Window 0 19.09.2012 10:45
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 12:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16