大同网站建设制作,博客自适应模板,网站后台怎么给图片做水印,登录网站软件怎么做❤️ 前言
“这个世界乱糟糟的而你干干净净可以悬在我心上做太阳和月亮。”#xff0c;七夕节表白日#xff0c;你要错过吗#xff1f;如果你言辞不善#xff0c;羞于开口的话#xff0c;可以使用 html5 canvas 制作浪漫的七夕爱心表白动画特效#xff0c;全屏的爱心和…
❤️ 前言
“这个世界乱糟糟的而你干干净净可以悬在我心上做太阳和月亮。”七夕节表白日你要错过吗如果你言辞不善羞于开口的话可以使用 html5 canvas 制作浪漫的七夕爱心表白动画特效全屏的爱心和表白语了解一下
❤️ 效果图 ❤️ 代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8title七夕520爱心表白/titlestyle*{margin:0; padding:0;}body{ background-color: #1E1E1E; }/style
/head
bodycanvas iddrawHeart/canvasscriptvar 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 最后祝天下有情人终成眷属
