HTML5/Canvas黑板涂鸦动画

Canvas graffiti，使用随机噪音算法实现的随机笔画。

canvas, paint

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2690
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

class Pencil {
  constructor( x, y ) {
    this.position = { 'x': x, 'y': y }
    this.radius = 1
    this.color = getRandomColor()
  }
}

class Experience {
  constructor( container ) {
    console.clear()

this.canvas = document.createElement( 'canvas' )
    container.appendChild( this.canvas )
    this.context = this.canvas.getContext( '2d' )

const fps = 120
    this.fpsInterval = 1000 / fps
    this.then = Date.now()

this.resize()

this.noise = new SimplexNoise( Math.random )

const pencilsNumber = 50
    this.pencils = []
    this.counter = 0
    this.coef = 1

for( let i = 0; i < pencilsNumber; i++ ) {
      const pencil = new Pencil( Math.random() * this.canvas.width, Math.random() * this.canvas.height )
      this.pencils.push( pencil )
    }

this.bind()
    this.loop()
  }
 
  bind() {
    window.addEventListener( 'resize', this.resize.bind( this ), false )
  }

render() {
    for( let pencil of this.pencils ) {
      pencil.position.x += this.noise.noise3D( pencil.position.x / 100, pencil.position.x / 100, this.counter / 100 ) * this.coef
      pencil.position.y += this.noise.noise3D( pencil.position.y / 100, pencil.position.y / 100, this.counter / 100 ) * this.coef
      
      this.context.beginPath()
      this.context.arc( pencil.position.x, pencil.position.y, pencil.radius, 0, Math.PI * 2, true )
      this.context.fillStyle = pencil.color
      this.context.fill()
      this.context.closePath()
    }

this.counter++
  }

loop() {
    this.raf = window.requestAnimationFrame( this.loop.bind( this ) )

const now = Date.now()
    const delta = now - this.then

if( delta > this.fpsInterval ) {
      this.render()
      this.then = now
    }
  }

resize() {
    this.canvas.width = window.innerWidth
    this.canvas.height = window.innerHeight
    this.center = {
      'x': this.canvas.width / 2,
      'y': this.canvas.height / 2
    }
  }
}

const getRandomColor = () => {
  const value = Math.floor( Math.random() * 255 )
  return '#' + value.toString( 16 ) + value.toString( 16 ) + value.toString( 16 )
}

const container = document.getElementById( 'canvas' )
let experience = new Experience( container )

编译

CSS

HTML

Canvas graffiti，使用随机噪音算法实现的随机笔画。

canvas, paint

编辑器支持Emmet

快捷键

Canvas graffiti，使用随机噪音算法实现的随机笔画。

canvas, paint

HTML5 | Canvas画笔小应用（涂鸦板）

HTML5/Canvas龙图分形自动绘制动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：