html5黑板源码,HTML5/Canvas黑板涂鸦动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

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 )