HTML5如何画有颜色的矩阵,HTML5/Canvas具有吸引力的点矩阵

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

document.addEventListener('DOMContentLoaded', init, false)

let APP

function init() {

APP = new App()

events()

loop()

}

function loop() {

APP.render()

requestAnimationFrame(loop)

}

function events() {

document.addEventListener('mousemove', APP.mousemoveHandler, false)

document.addEventListener('mouseleave', APP.mouseleaveHandler, false)

window.addEventListener('resize', APP.resize, false)

}

class App {

constructor() {

this.canvas = document.getElementById('playground')

this.context = this.canvas.getContext('2d')

this.canvas.width = this.width = window.innerWidth

this.canvas.height = this.height = window.innerHeight

this.setupDots()

this.resize = this.resize.bind(this)

this.mousemoveHandler = this.mousemoveHandler.bind(this)

this.mouseleaveHandler = this.mouseleaveHandler.bind(this)

}

setupDots() {

this.dots = []

this.scl = 60

this.cols = this.width / this.scl

this.rows = this.height / this.scl

let id = 0

for (let x = 0; x < this.cols; x += 1) {

for (let y = 0; y < this.rows; y += 1) {

this.dots.push(new Dot(id, x * this.scl, y * this.scl, this.context, this.scl))

id += 1

}

}

}

resize() {

this.canvas.width = this.width = window.innerWidth

this.canvas.height = this.height = window.innerHeight

this.setupDots()

}

mousemoveHandler(event) {

this.dots.forEach(d => {

d.mousemove(event)

})

}

mouseleaveHandler() {

this.dots.forEach(d => {

d.isHover = false

})

}

render() {

this.context.clearRect(0, 0, this.width, this.height)

this.dots.forEach(d => {

d.render()

})

}

}

class Dot {

constructor(id, x, y, context, scl) {

this.id = id

this.x = x

this.y = y

this.new = {

x: x,

y: y

}

this.radius = 3

this.context = context

this.scl = scl

this.isHover = false

this.isANimated = false

}

mousemove(event) {

const x = event.clientX

const y = event.clientY

this.isHover = ((Math.abs(this.x - x) < (this.scl / 4 * 3)) && (Math.abs(this.y - y) < (this.scl / 4 * 3))) ? true : false

if (this.isHover) {

TweenMax.to(

this.new,

0.4, {

x: x,

y: y

}

)

} else {

TweenMax.to(

this.new,

0.4, {

x: this.x,

y: this.y

}

)

}

}

render() {

this.context.beginPath()

this.context.arc(this.new.x, this.new.y, this.radius, 0, 2 * Math.PI, false)

this.context.fillStyle = 'rgba(90, 251, 134, 1)'

this.context.globalAlpha = (this.isHover) ? 1 : 0.25

this.context.fill()

}

}