html画倒金字塔直线,HTML5/Canvas 生成金字塔动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

'use strict';

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext('2d');

var context = ctx;

var width = window.innerWidth;

var height = window.innerHeight;

var centerX = width / 2;

var centerY = height / 2;

canvas.width = width;

canvas.height = height;

var imageDataOriginal = undefined;

var imageDataOriginalCopy = undefined;

var imageWidth = undefined;

var imageHeigh = undefined;

function animate() {

window.requestAnimationFrame(animate);

render();

}

var offset = 50;

var lastPosX = centerX;

var lastPosY = centerY;

var turn = 1;

var i = 1;

function render() {

ctx.beginPath();

ctx.moveTo(lastPosX, lastPosY);

var x = undefined,

y = undefined,

c = undefined;

if (turn === 1) {

x = lastPosX + i - Math.random() * Math.random();

y = lastPosY;

c = '#900c3f';

} else if (turn === 2) {

x = lastPosX;

y = lastPosY + i - Math.random() * Math.random();

c = '#C70039';

} else if (turn === 3) {

x = lastPosX - i + Math.random() * Math.random();

y = lastPosY;

c = '#ff5733';

} else if (turn === 4) {

x = lastPosX;

y = lastPosY - i + Math.random() * Math.random();

c = '#ffc300';

}

ctx.lineWidth = 0.1;

ctx.strokeStyle = c;

ctx.lineTo(x, y);

ctx.stroke();

lastPosX = x;

lastPosY = y;

i++;

if (turn >= 4) {

turn = 1;

} else {

turn += 1;

}

if (lastPosX > width - offset || lastPosY > height - offset) {

lastPosX = centerX;

lastPosY = centerY;

i = 1;

}

}

animate();