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();

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

html5绘制运动的图形,html5 canvas高级贝塞尔曲线运动动画
canvas高级贝塞尔曲线运动动画 window.addEventListener('load',eventWindowLoaded,false);functioneventWindowLoaded( ...
html5绘制节点链接,利用HTML5实现网状结构节点动画特效
特效描述:利用HTML5实现网状结构节点动画特效.利用HTML5实现网状结构节点动画特效代码结构 1. HTML代码 (function() { var canvas, ctx, circ, n ...
HTML5 Canvas 高仿逼真 3D 布料图案效果
HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.下面给大家分享一个 HTML5 C ...
html canvas图片上绘制文字,如何用HTML5 CANVAS绘制文字
您可能感兴趣的话题: 绘制文字核心提示:如何在HTML5 canvas上绘制绘制文字,并且可以设置文字的字体,大小和颜色. 我们可以在HTML5 canvas上绘制绘制文字,并且可以设置文字的字体, ...
html5绘制五环,浅析HTML5的Canvas——案例绘制
1. Canvas绘制五环 //1.获取canvas和上下文 var canvas = document.getElementById('canvas'); var ctx = canvas.getC ...
HTML5 基础知识，第 3 部分 HTML5 API 之应用-介绍HTML5 API 的用法和价值，Canvas 提供的创造性，以及Web storage的离线应用
HTML5 集设计者和开发者于一身,其主要任务就是构建高效的丰富 Internet 应用程序之富网络应用 (Rich Internet Application,简称RIA),尤其是富 UI(User ...
用HTML5绘制的一个星空特效图
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
HTML5 学习总结（四）——canvas绘图、WebGL、SVG
目录一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画二.WebGL 2.1.HTML ...
html制作星空,HTML5绘制星空
HTML5绘制一个很丑的星空 canvas{display: block;border:1px dotted skyblue;} HTML5绘制星空 var nimo={}; window.οnlοa ...
html5 绘制图形,HTML5绘制几何图形
绘制几何图形 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext(" ...

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

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

最新文章

热门文章