html5绘制心形图案,HTML5/Canvas 渐变色彩的心形图案

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

window.requestAnimFrame = (function() {

return window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.oRequestAnimationFrame ||

window.msRequestAnimationFrame ||

function(callback) {

window.setTimeout(callback, 1000 / 60);

};

})();

var c = document.getElementById('canv');

var $ = c.getContext('2d');

var w = c.width = window.innerWidth;

var h = c.height = window.innerHeight;

var w2 = w * 0.5;

var h2 = h * 0.5;

var u = 0;

var hearts = [];

var hp = [

[-14, -81, -149, -94, -167, 0],

[-184, 95, -28, 157, 0, 250],

[28, 157, 184, 95, 167, 0],

[149, -94, 14, -81, 0, 0]

];

function Love() {

document.body.appendChild(c);

function anim() {

one0one();

requestAnimFrame(anim);

}

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

var heart = new Heart(w2, h2 - 180, 1.5 + (0.15 * (i - 101) / (i + 1.5)));

hearts.push(heart);

}

anim();

}

function one0one() {

$.clearRect(0, 0, w, h);

$.globalCompositeOperation = "xor";

u -= 0.5;

for (var i = 0; i < hearts.length; i++) {

hearts[i].render($);

}

}

function Heart(x, y, s) {

this.x = x || w2;

this.y = y || h2;

this.s = s || 1;

this.render = function($) {

$.beginPath();

$.fillStyle = 'hsl(' + u + ', 77%, 46%)';

$.moveTo(this.x, this.y);

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

$.bezierCurveTo(hp[i][0] * this.s + this.x, hp[i][1] * this.s + this.y, hp[i][2] * this.s + this.x, hp[i][3] * this.s + this.y, hp[i][4] * this.s + this.x, hp[i][5] * this.s + this.y);

}

$.closePath();

$.fill();

};

}

Love();