时间戳

首页 > 解决方案 > 带有 javascript 的 HTML 画布

javascript - 带有 javascript 的 HTML 画布

问题描述

我有一个 index.hTML 文件，它只是呈现这样的画布

<body>
    <canvas>
    </canvas>
    <script src="./JS/index.js" type="module"></script>
</body>

我有一个用于操作画布的 JavaScript 文件，如下所示

let canvas = document.querySelector('canvas')
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const c = canvas.getContext('2d')

class Circle {
    constructor(x, y, radius, color){
        this.x = x
        this.y = y
        this.radius = radius
        this.color = color
    }

    draw(){
        c.beginPath()
        c.arc(this.x, this.y, this.radius, Math.PI*2, false)
        c.strokeStyle = this.color

        c.stroke()

    }

}
 function manyCircles (numberOfCircles){
     requestAnimationFrame(manyCircles)
     c.clearRect(0,0,innerWidth, innerHeight)
     for (let i = 0; i <numberOfCircles; i++) {
        let x = Math.random()*innerWidth
        let y = Math.random() * innerHeight
        const circ1 = new Circle(x, y, 50, 'blue')
        circ1.draw()
     }   
     debugger
 }

manyCircles(5)

这里的目标是每次函数运行时在画布上以随机坐标绘制 5 个圆圈并被清除并循环重复，但显然 for 循环永远运行并且只是用圆圈填充屏幕。但是，如果我有这样的

 function manyCircles (){
     requestAnimationFrame(manyCircles)
     c.clearRect(0,0,innerWidth, innerHeight)
     for (let i = 0; i <5; i++) {
        let x = Math.random()*innerWidth
        let y = Math.random() * innerHeight
        const circ1 = new Circle(x, y, 50, 'blue')
        circ1.draw()
     }   
     debugger
 }

manyCircles()

它似乎有效 有人可以告诉我为什么它适用于第二种情况而不是第一种情况吗？我在这里缺少什么原则

标签： javascripthtmlcanvashtml5-canvas

解决方案

如果需要在内部传递参数requestAnimationFrame，则需要在函数内部进行。

默认情况下，传递给内部回调函数的参数raf是时间戳。正如评论中所指出的，这是一个越来越庞大的数字。

let canvas = document.querySelector('canvas')
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const c = canvas.getContext('2d')

class Circle {
  constructor(x, y, radius, color) {
    this.x = x
    this.y = y
    this.radius = radius
    this.color = color
  }

  draw() {
    c.beginPath()
    c.arc(this.x, this.y, this.radius, Math.PI * 2, false)
    c.strokeStyle = this.color

    c.stroke()

  }

}

function manyCircles(numberOfCircles) {
  requestAnimationFrame(function() {
    manyCircles(numberOfCircles)
  })
  c.clearRect(0, 0, innerWidth, innerHeight)
  for (let i = 0; i < numberOfCircles; i++) {
    let x = Math.random() * innerWidth
    let y = Math.random() * innerHeight
    const circ1 = new Circle(x, y, 50, 'blue')
    circ1.draw()
  }
  debugger
}

manyCircles(5)
<canvas></canvas>

推荐阅读