时间戳

首页 > 解决方案 > 如何在javascript中使用计时器来绘制它？

javascript - 如何在javascript中使用计时器来绘制它？

问题描述

我正在尝试使用 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();

  }
 }

知道如何画这个吗？谢谢你。

标签： javascripttimerdrawingdraw

解决方案

确保您的js代码没有以文件类型加载，否则您无法通过直接在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();
  }
}

推荐阅读