万花筒相册html,HTML5/Canvas 万花筒图案动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

(function() {

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

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

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

ctx.lineWidth = 3;

var x, y;

var θ;

var a = -400;

var b = 50;

var mode = 1;

var changeFactor = 1;

var p1 = 6;

var p2 = 6;

//handle presets

$('select').on('change', function(ev) {

switch ($(this).val()) {

case "preset1":

p1 = 6;

p2 = 6;

break;

case "preset2":

p1 = 7;

p2 = 5;

break;

case "preset3":

p1 = 7;

p2 = 9;

break;

case "preset4":

p1 = 3;

p2 = 9;

break;

a = 0;

}

});

function draw() {

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

ctx.beginPath();

for (θ = 0; θ < Math.PI * 2; θ += 0.01) {

x = a / 2 + b * Math.cos(θ) - a / 2 * Math.cos(p1 * θ) + canvas.width / 2 - a / 2;

y = b * Math.sin(θ) + a / 2 * Math.sin(p2 * θ) + canvas.height / 2;

ctx.lineTo(x, y);

}

ctx.closePath();

ctx.strokeStyle = 'orangered';

ctx.fillStyle = 'orange';

ctx.fill('evenodd');

ctx.stroke();

if (mode === 1) {

a += changeFactor;

if (a > canvas.width / 2 / 2) {

mode = 2;

}

} else if (mode === 2) {

a -= changeFactor;

if (a < -400) {

mode = 1;

}

}

requestAnimationFrame(draw);

}

draw();

})();