html5花瓣掉落素材,HTML5/Canvas 美丽的花瓣纹理

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var lineNum = 20;

var lineSpacing = 20;

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

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

canvas.width = innerWidth;

canvas.height = innerHeight;

window.onresize = function() {

canvas.width = innerWidth;

canvas.height = innerHeight;

};

function draw() {

ctx.clearRect(0, 0, innerWidth, innerHeight);

for (var i = 0; i < lineNum; i++) {

ctx.beginPath();

ctx.moveTo(innerWidth / 2, 0);

ctx.bezierCurveTo(innerWidth / 2 - (i * lineSpacing), innerHeight * (1 / 3), innerWidth / 2 + (i * lineSpacing), innerHeight * (2 / 3), innerWidth / 2, innerHeight);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(innerWidth / 2, 0);

ctx.bezierCurveTo(innerWidth / 2 + (i * lineSpacing), innerHeight * (1 / 3), innerWidth / 2 - (i * lineSpacing), innerHeight * (2 / 3), innerWidth / 2, innerHeight);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(0, innerHeight / 2);

ctx.bezierCurveTo(innerWidth * (1 / 3), innerHeight / 2 - (i * lineSpacing), innerWidth * (2 / 3), innerHeight / 2 + (i * lineSpacing), innerWidth, innerHeight / 2);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(0, innerHeight / 2);

ctx.bezierCurveTo(innerWidth * (1 / 3), innerHeight / 2 + (i * lineSpacing), innerWidth * (2 / 3), innerHeight / 2 - (i * lineSpacing), innerWidth, innerHeight / 2);

ctx.stroke();

}

window.requestAnimationFrame(draw);

}

draw();