情人节表白爱心动画
代码语言:html
所属分类:表白
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { height: 100%; width: 100%; background: #ee9ca7; padding: 0; margin: 0; overflow: hidden; } canvas#canvas { background: #ee9ca7; /* fallback for old browsers */ background: -webkit-linear-gradient(to bottom, #ffdde1, #ee9ca7); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to bottom, #ffdde1, #ee9ca7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } </style> </head> <body translate="no"> <div id="contents"> <canvas id="canvas">This browser cannot use a canvas.</canvas> </div> <script> (function () { 'use strict'; window.addEventListener('load', function () { var canvas = document.getElementById('canvas'); if (!canvas || !canvas.getContext) { return false; } /******************** Random Number ********************/ function rand(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } /******************** Var ********************/ // canvas var ctx = canvas.getContext('2d'); var X = canvas.width = window.innerWidth; var Y = canvas.height = window.innerHeight; // heart var heartNum = 1; var hearts = []; var miniHeartNum = 100; var miniHearts = []; var rad = Math.PI / 180; var GRAVITY = 0.01; /******************** Animation ********************/ window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function (cb) { setTimeout(cb, 17); }; /******************** MiniHeart ********************/ function MiniHeart(ctx, x, y, r) { this.ctx = ctx; this.init(x, y, r); } MiniHeart.prototype.init = function (x, y, r) { this.ctx = ctx; this.r = r; this.x1 = x; this.y1 = y; this.a = rand(0, 360); this.num = 22.5; this.v = { x: rand(-3, 3), y: rand(-3, 3) }; this.x2 = this.x1 + this.r * Math.cos(this.a * rad); this.y2 = this.y1 + this.r * Math.sin(this.a * rad); this.cx1 = this.x1 + this.r * Math.cos((this.a + this.num) * rad); this.cy1 = this.y1 + this.r * Math.sin((this.a + this.num) * rad); this.cx2 = this.x1 + this.r * Math.cos((this.a - this.num) * rad); this.cy2 = this.y1 + this.r * Math.sin((this.a - this.num) * rad); this.chord = 2 * this.r * Math.sin(this.num * rad / 2); }; MiniHeart.prototype.draw = function () { ctx = this.ctx; ctx.restore(); ctx.fillStyle = '#fb7daf'; ctx.beginPath(); ctx.moveTo(this.x2, this.y2); ctx.arc(this.cx1, this.cy1, this.chord, (270 + this.a) * rad, (270 + this.a + 225) * rad); ctx.lineTo(this.x1, this.y1); ctx.moveTo(this.x2, this.y2); ctx.arc(this.cx2, this.cy2, this.chord, (90 + this.a) * rad, (90 + this.a + 135) * rad, true); ctx.lineTo(this.x1, this.y1); ctx.fill(); }; MiniHeart.prototype.wrapPosition = function () { if (this.y1 > Y) { this.init(X / 2, Y / 2, rand(5, 30)); } }; MiniHeart.prototype.updatePosition = function () { this.v.y += GRAVITY; this.x1 += this.v.x; this.x2 += this.v.x; this.cx1 += this.v.x; this.cx2 += thi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0