<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>爱心</title><style>*{margin:0; padding:0;}body{ background-color: #1E1E1E; }</style></head><body><canvas id="drawHeart"></canvas><script>var hearts = [];var canvas = document.getElementById('drawHeart');var wW = window.innerWidth;var wH = window.innerHeight;// 创建画布var ctx = canvas.getContext('2d');// 创建图片对象var heartImage = new Image();heartImage.src = 'img/heart.svg';var num = 100;init();window.addEventListener('resize', function(){ wW = window.innerWidth; wH = window.innerHeight;});// 初始化画布大小function init(){canvas.width = wW;canvas.height = wH;for(var i = 0; i < num; i ){hearts.push(new Heart(i%5));}requestAnimationFrame(render);}function getColor(){var val = Math.random() * 10;if(val > 0 && val <= 1){return '#00f';} else if(val > 1 && val <= 2){return '#f00';} else if(val > 2 && val <= 3){return '#0f0';} else if(val > 3 && val <= 4){return '#368';} else if(val > 4 && val <= 5){return '#666';} else if(val > 5 && val <= 6){return '#333';} else if(val > 6 && val <= 7){return '#f50';} else if(val > 7 && val <= 8){return '#e96d5b';} else if(val > 8 && val <= 9){return '#5be9e9';} else {return '#d41d50';}}function getText(){var val = Math.random() * 10;if(val > 1 && val <= 3){return '爱你一辈子';} else if(val > 3 && val <= 5){return '感谢你';} else if(val > 5 && val <= 8){return '喜欢你';} else{return 'I Love You';}}function Heart(type){this.type = type;// 初始化生成范围this.x = Math.random() * wW;this.y = Math.random() * wH;this.opacity = Math.random() * .5 .5;// 偏移量this.vel = {x: (Math.random() - .5) * 5,y: (Math.random() - .5) * 5}this.initialW = wW * .5;this.initialH = wH * .5;// 缩放比例this.targetScale = Math.random() * .15 .02; // 最小0.02this.scale = Math.random() * this.targetScale;// 文字位置this.fx = Math.random() * wW;this.fy = Math.random() * wH;this.fs = Math.random() * 10;this.text = getText();this.fvel = {x: (Math.random() - .5) * 5,y: (Math.random() - .5) * 5,f: (Math.random() - .5) * 2}}Heart.prototype.draw = function(){ctx.save();ctx.globalAlpha = this.opacity;ctx.drawImage(heartImage, this.x, this.y, this.width, this.height);ctx.scale(this.scale 1, this.scale 1); if(!this.type){ // 设置文字属性ctx.fillStyle = getColor(); ctx.font = 'italic ' this.fs 'px sans-serif'; // 填充字符串 ctx.fillText(this.text, this.fx, this.fy); }ctx.restore();}Heart.prototype.update = function(){this.x = this.vel.x;this.y = this.vel.y;if(this.x - this.width > wW || this.x this.width < 0){// 重新初始化位置this.scale = 0;this.x = Math.random() * wW;this.y = Math.random() * wH;}if(this.y - this.height > wH || this.y this.height < 0){// 重新初始化位置this.scale = 0;this.x = Math.random() * wW;this.y = Math.random() * wH;}// 放大this.scale = (this.targetScale - this.scale) * .1;this.height = this.scale * this.initialH;this.width = this.height * 1.4;// -----文字-----this.fx = this.fvel.x;this.fy = this.fvel.y;this.fs = this.fvel.f;if(this.fs > 50){this.fs = 2;}if(this.fx - this.fs > wW || this.fx this.fs < 0){// 重新初始化位置this.fx = Math.random() * wW;this.fy = Math.random() * wH;}if(this.fy - this.fs > wH || this.fy this.fs < 0){// 重新初始化位置this.fx = Math.random() * wW;this.fy = Math.random() * wH;}}function render(){ctx.clearRect(0, 0, wW, wH);for(var i = 0; i < hearts.length; i ){hearts[i].draw();hearts[i].update();}requestAnimationFrame(render);}</script></body></html>特效七
<!doctype html><html><head> <meta charset="utf-8"> <title>canvas五彩斑斓的粒子动画特效</title> <style> body { overflow: hidden; margin: 0; padding: 0; background: hsla(242, 30%, 5%, 1); } canvas { width: 100%; } </style></head><body> <canvas id='canv'></canvas> <script> /* (Book REF) HTML5 Canvas Ch. 5: Math, Physics, and Animation ::: Uniform Circular Motion By Steve Fulton and Jeff Fulton */ window.requestAnimFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; })(); window.addEventListener('load', start, false); var c, $, w, h, msX, msY, midX, midY, num = 650, parts = [], begin = 50, repeat = 20, end = Math.PI * 2, force = null, msdn = false; function start() { c = document.getElementById('canv'); $ = c.getContext('2d'); w = c.width = window.innerWidth; h = c.height = window.innerHeight; midX = w / 2; midY = h / 2; force = Math.max(w, h) * 0.09; flow = begin; window.requestAnimFrame(create); run(); } function run() { window.requestAnimFrame(run); go(); } function Part() { this.deg = 0; this.rad = 0; this.x = 0; this.y = 0; this.distX = 0; this.distY = 0; this.color = 'rgb(' Math.floor(Math.random() * 130) ',' Math.floor(Math.random() * 50) ',' Math.floor(Math.random() * 100) ')'; this.size; } function create() { var n = num; while (n--) { var p = new Part(); p.deg = Math.floor(Math.random() * 360); p.rad = Math.floor(Math.random() * w * 0.5); p.x = p.distX = Math.floor(Math.random() * w); p.y = p.distY = Math.floor(Math.random() * h); p.size = 1 Math.floor(Math.random() * (p.rad * 0.055)); parts[n] = p; } c.onmousemove = msmv; c.onmousedown = msdn; c.onmouseup = msup; var int = setInterval(function () { flow--; if (flow === repeat) clearInterval(int); }, 20); } function go() { $.globalCompositeOperation = 'source-over'; $.fillStyle = 'hsla(242, 30%, 5%, .55)'; $.fillRect(0, 0, w, h); $.globalCompositeOperation = 'lighter'; var mx = msX; var my = msY; var bounds = force; if (msdn) { bounds = force * 2; } var n = num; while (n--) { var p = parts[n]; var radi = Math.PI / 180 * p.deg; p.distX = midX p.rad * Math.cos(radi); p.distY = midY p.rad * Math.sin(radi) * 0.4; if (mx && my) { var react = Math.floor((bounds * 0.5) Math.random() * (bounds * 0.9)); if (p.distX - mx > 0 && p.distX - mx < bounds && p.distY - my > 0 && p.distY - my < bounds) { p.distX = react; p.distY = react; } else if (p.distX - mx > 0 && p.distX - mx < bounds && p.distY - my < 0 && p.distY - my > -bounds) { p.distX = react; p.distY -= react; } else if (p.distX - mx < 0 && p.distX - mx > -bounds && p.distY - my > 0 && p.distY - my < bounds) { p.distX -= react; p.distY = react; } else if (p.distX - mx < 0 && p.distX - mx > -bounds && p.distY - my < 0 && p.distY - my > -bounds) { p.distY -= react; p.distY -= react; } } p.x = ((p.distX - p.x) / flow); p.y = ((p.distY - p.y) / flow); var x = p.x; var y = p.y; var s = p.size * (p.y * 1.5 / h); if (s < 0.1) { s = 0; } $.beginPath(); $.fillStyle = p.color; $.arc(x, y, s, 0, end, true); $.fill(); $.closePath(); var vary; if (p.size < 2) { vary = 4; } else if (p.size < 3) { vary = 3; } else if (p.size < 4) { vary = 2; } else { vary = 1; } vary *= (p.y / (h * 0.9)); p.deg = vary; p.deg = p.deg % 360; } } function msmv(e) { var p = getPos(e.target); var sX = window.pageXOffset; var sY = window.pageYOffset; msX = e.clientX - p.x sX; msY = e.clientY - p.y sY; } function msdn(e) { msdn = true; } function msup(e) { msdn = false; } function getPos(el) { var cosmo = {}; cosmo.x = el.offsetLeft; cosmo.y = el.offsetTop; while (el.offsetParent) { el = el.offsetParent; cosmo.x = el.offsetLeft; cosmo.y = el.offsetTop; } return cosmo; } </script></body></html>文案八
