Как сделать это с помощью таймера в JavaScript? - PullRequest
Новая
       45

Как сделать это с помощью таймера в JavaScript?

0 голосов
/ 27 сентября 2019

Я пытаюсь сделать этот дизайн снежинки "вытянутым", используя "таймер" на javascript.В одном из примеров, вот как нарисован круг:

http://jsfiddle.net/avanhout13/9opengv7/1/

var t = 0;
var c = document.getElementById("myCanvas");
var R = c.width/2;
var ctx = c.getContext("2d");


function doDrawing() {
    t = 0;


    // Clear the Canvas
    ctx.clear();

    // Create a random color
    var timesRun = 0;
    var color =  '#'+Math.floor(Math.random()*16777215).toString(16);

    // Initial x and y
    var x = R+R*Math.cos(0);
    var y = R+R*Math.sin(0);

    // Start the Drawing
    ctx.beginPath();
    ctx.strokeStyle = color;
    ctx.moveTo(x,y);

    //Use the timer to create drawing
    var interval = setInterval(function(){
    timesRun += 1;
    if(timesRun === 65){
        clearInterval(interval); }

    drawCircle();}, 20); 

}

function drawCircle()
{
  t += 0.1;
  x = Math.floor(R+R*Math.cos(t));
  y = Math.floor(R+R*Math.sin(t));

  ctx.lineTo(x,y);  
  ctx.stroke();
}

CanvasRenderingContext2D.prototype.clear = 
  CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
    if (preserveTransform) {
      this.save();
      this.setTransform(1, 0, 0, 1, 0, 0);
    }

    this.clearRect(0, 0, this.canvas.width, this.canvas.height);

    if (preserveTransform) {
      this.restore();
    }           
};

Это рисунок снежинки.Я хочу сделать подобную технику рисования, но не могу понять, как заставить ее активно рисоваться при нажатии кнопки «рисовать».

https://jsfiddle.net/avanhout13/g8xs9Ljf/

let canvas = document.getElementById('snowflake'),
    ctx = canvas.getContext('2d'),
    maxLevel = 2,
    branches = 7;

 canvas.width = 1000;
 canvas.height = 1000;

 ctx.translate(canvas.width / 2, canvas.height / 2);

 let angle = Math.PI * 2 + Math.random();

 for (let i = 0; i < 6; i++) {
    drawLine(0);
    ctx.rotate(Math.PI * 2 / 6);
 }


 function drawLine(level) {
    if (level > maxLevel) return;
    ctx.strokeStyle = "black";
    ctx.lineWidth = 3;
    ctx.beginPath();
     ctx.moveTo(0, 0);
     ctx.lineTo(200, 0);
     ctx.stroke();


  for (let i = 1; i < branches + 1; i++) {
    ctx.save();
    ctx.translate(200 * i / (branches + 1), 0);

    ctx.save();

    ctx.rotate(angle);
    drawLine(level + 1);

    ctx.restore();

    ctx.save();

    ctx.rotate(-angle);
    drawLine(level + 1);

    ctx.restore();

    ctx.restore();

  }
 }

ЛюбойИдея как заставить это рисовать?Спасибо.

1 Ответ

0 голосов
/ 27 сентября 2019

Убедитесь, что ваш js-код не загружен в file type, иначе вы не сможете использовать функцию, напрямую введя ее имя в html-тег.

В JSFiddle онаможно изменить с помощью метки выбора в верхнем левом углу окна js.

Надеюсь, это поможет. 

<html lane='en'>
  <head>
  <meta charset='utf-8'>
  <title> Snowflake Spirograph</title>
  </head>
 <body>
   <button onclick="draw()">Start Drawing</button>
   <canvas id="snowflake" width="1000" height="1000"></canvas>
 </body>
 </html>

const canvas = document.getElementById('snowflake');
const ctx = canvas.getContext('2d');
const maxLevel = 2;
const branches = 7;

ctx.translate(canvas.width / 2, canvas.height / 2);

let angle = Math.PI * 2 + Math.random();

function draw() {
  for (let i = 0; i < 6; i++) {
    drawLine(1);
    ctx.rotate(Math.PI * 2 / 6);
  }
}


function drawLine(level) {
  if (level > maxLevel) return;
  ctx.strokeStyle = "black";
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(200, 0);
  ctx.stroke();

  for (let i = 1; i < branches + 1; i++) {
    ctx.save();
    ctx.translate(200 * i / (branches + 1), 0);

    ctx.save();

    ctx.rotate(angle);
    drawLine(level + 1);

    ctx.restore();

    ctx.save();

    ctx.rotate(-angle);
    drawLine(level + 1);

    ctx.restore();
    ctx.restore();
  }
}
...