html5游戏黑白块,HTML5 Canvas黑白条纹螺旋环形动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

;

(() => {

const canvas = document.getElementById('c')

const ctx = canvas.getContext('2d')

let width = canvas.width = window.innerWidth

let height = canvas.height = window.innerHeight

const settings = {

dots: 6,

speed: 1,

layerSize: 50,

layers: 120,

radius: 180,

}

const gui = new dat.GUI()

const _gui = gui.addFolder('Settings')

_gui.add(settings, 'dots', 3, 30).step(1)

_gui.add(settings, 'speed', 0, 10).step(1)

_gui.open()

const stats = new Stats()

stats.setMode(0)

stats.domElement.style.position = 'absolute'

stats.domElement.style.left = '15px'

stats.domElement.style.top = '0px'

document.body.appendChild(stats.domElement)

const rad = (angl) => {

return angl * Math.PI / 180

}

const polygon = (x, y, radius, dots, rad = 0, color, mask = false) => {

ctx.save()

ctx.globalCompositeOperation = mask ? 'destination-in' : 'destination-over'

ctx.beginPath()

for (let i = 0; i <= dots; i++) {

let teta = i * 2 * Math.PI / dots + rad

let _x = x + radius * Math.cos(teta)

let _y = y + radius * Math.sin(teta)

if (i === 0) {

ctx.moveTo(_x, _y)

} else {

ctx.lineTo(_x, _y)

}

}

ctx.fillStyle = color

ctx.fill()

ctx.closePath()

ctx.restore()

}

const _layers = []

const layerOverlap = Math.round(settings.layers * .1)

for (let i = 0; i < settings.layers; i++) {

_layers.push({

x: width / 2 + Math.cos(i / settings.layers * 2 * Math.PI) * settings.radius,

y: height / 2 + Math.sin(i / settings.layers * 2 * Math.PI) * settings.radius,

c: i % 2 ? '#000' : '#fff',

})

}

let time = 0

const draw = () => {

time += settings.speed

ctx.clearRect(0, 0, width, height)

for (let i = settings.layers - layerOverlap; i < settings.layers; i++) {

polygon(_layers[i].x, _layers[i].y, settings.layerSize, settings.dots, rad(time), _layers[i].c)

}

polygon(_layers[0].x, _layers[0].y, settings.layerSize, settings.dots, rad(time), _layers[0].c, true)

for (let i = 0; i < settings.layers; i++) {

polygon(_layers[i].x, _layers[i].y, settings.layerSize, settings.dots, rad(time), _layers[i].c)

}

}

const loop = () => {

requestAnimationFrame(loop)

stats.begin()

draw()

stats.end()

}

loop()

})();