H5炫酷特效系列1——canvas满屏幕变换爱心示例

啥都不说，先上效果图，同志们觉得满意就继续看，不中意直接过。

效果为满屏幕的红心到处乱窜，红心自动变换大小和透明度，代码也不多，同志们直接复制就可以运行查看。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>满屏幕红心</title><style type="text/css">body{margin: 0;overflow: hidden;background: #303035;}</style></head><body><canvas></canvas><div id="container" class="container"></div><script src="https://code.jquery.com/jquery-3.2.1.min.js" charset="utf-8"></script><script type="text/javascript">var canvas = document.querySelector("canvas");var ctx = canvas.getContext("2d");var ww = window.innerWidth;var wh = window.innerHeight;var hearts = [];function init(){requestAnimationFrame(render);canvas.width = ww;canvas.height = wh;for(var i = 0; i < 100; i++){hearts.push(new Heart());}}function Heart() {this.x = Math.random() * ww;this.y = Math.random() * wh;this.opacity = (Math.random() * 0.5) + 0.5;this.vel = {x: (Math.random() - 0.5) * 4,y: (Math.random() - 0.5) * 4};this.targetScale = (Math.random() * 0.15) + 0.02;this.scale = this.targetScale * Math.random();}Heart.prototype.update = function(){this.x += this.vel.x;this.y += this.vel.y;this.scale += (this.targetScale - this.scale) * 0.01;if(this.x - this.width > ww || this.x + this.width < 0){this.scale = 0;this.x = Math.random() * ww;}if(this.y - this.height > wh || this.y + this.height < 0){this.scale = 0;this.y = Math.random() * wh;}this.width = 473.8 * this.scale;this.height = 408.6 * this.scale;}Heart.prototype.draw = function(){ctx.globalAlpha = this.opacity;ctx.drawImage(heartImage, this.x - this.width * 0.5, this.y - this.height * 0.5,this.width, this.height);}function render(){ctx.clearRect(0, 0, ww, wh);// ctx.globalAlpha = 1;// ctx.fillStyle = "rgba(255,255,255,0.3)";// ctx.fillRect(0, 0, ww, wh);for(var i=0; i<100; i++){hearts[i].update();hearts[i].draw();}requestAnimationFrame(render);}var heartImage = new Image();heartImage.onload = init();heartImage.src =  "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NzMuOHB4IiBoZWlnaHQ9IjQwOC42cHgiIHZpZXdCb3g9IjAgMCA0NzMuOCA0MDguNiI+PHBhdGggZmlsbD0iI2QzMjkzMiIgZD0iTTQwNC42LDE2LjZDMzg1LjQsNi4xLDM2My41LDAsMzQwLDBjLTQxLjUsMC03OC41LDE4LjktMTAzLDQ4LjVDMjEyLjMsMTguOSwxNzUuMywwLDEzMy44LDAgYy0yMy4zLDAtNDUuMyw2LjEtNjQuNSwxNi42QzI3LjksMzkuNSwwLDgzLjQsMCwxMzMuOWMwLDE0LjQsMi40LDI4LjMsNi42LDQxLjJDMjkuNiwyNzguNCwyMzcsNDA4LjYsMjM3LDQwOC42IHMyMDcuMi0xMzAuMiwyMzAuMi0yMzMuNWM0LjMtMTIuOSw2LjYtMjYuOCw2LjYtNDEuMkM0NzMuOCw4My40LDQ0NS45LDM5LjYsNDA0LjYsMTYuNnoiLz48L3N2Zz4=";window.addEventListener("resize",function(){ww = window.innerWidth;wh = window.innerHeight;})</script></body>
</html>

H5炫酷特效系列1——canvas满屏幕变换爱心示例相关推荐

H5炫酷特效系列2——canvas特效-炫酷的心
之前已经有了一个满屏幕红心的案例,这次带来一个更加炫酷的心型炫酷动效,直接上图,有兴趣的就继续往下看,没兴趣直接过. 屏幕上眼花缭乱的心,不停的冲击着你的视线,让那些少女心砰砰直跳,绝对表白利器,同志 ...
H5炫酷特效系列4——炫酷粒子变化特效
这个示例虽然没有相对比较实用的特性,但是表现出来的效果确实非常震撼眼球.先上效果图,让各位同胞感受一下: 特效的表现感很强,有兴趣的读者可以仔细学习一下下面的代码,尝试着理解其中的逻辑. <!D ...
H5炫酷特效系列3——瀑布流水特效
这个案例模拟瀑布流水的效果,有点类似喷泉,粒子模拟的水滴会一层一层的下落,很是漂亮. 效果看上去很是炫酷,代码并不是很多,几十行代码搞定,同志们直接复制运行就可以查看效果. <!DOCTYPE ...
html生日快乐爆开烟花,css3+H5炫酷喜庆全屏烟花动画特效
css3+H5炫酷喜庆全屏烟花动画特效 /* basic styles for black background and crosshair cursor */ body { background: ...
对一些常见的HTML5特效进行整理和运行（有趣特效，烟花特效，爱心特效，炫酷特效）
有趣特效 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en&quo ...
❤ 十一个拿来就能用的网页炫酷特效
❤ 十个拿来就能用的网页炫酷特效效果如下: (1) 鼠标点击爱心 <!DOCTYPE html> <html lang="en"> <head> ...
onenote 模板_onenote实用?炫酷功能系列篇②：用插件让效率翻倍
对我而言,onenote作为office系列的一员,最大的遗憾就是--竟然不支持VBA!office如此强大的一个通用神器,在onenote这里竟然直接被砍了.好在还有个替代品--Onetastic, ...
38.鼠标移动炫酷特效
效果 (源码网盘地址在最后) 视频演示「前端编程实战 38」HTML+CSS3 实现鼠标移动炫酷特效视频演示地址一:https://www.bilibili.com/video/BV1Xz411v ...
华为手机线刷工具_原来华为手机自带视频剪辑工具！简单操作几步，就能添加炫酷特效...
短视频是两年很火的社交手段之一,不管是在微博还是微信朋友圈了,很多朋友都喜欢使用视频来表达自己的动态. 有些朋友为了让自己的视频更加好看,就给视频添加字幕.音乐.动画等元素,但这些操作都要使用第三方工 ...

H5炫酷特效系列1——canvas满屏幕变换爱心示例

H5炫酷特效系列1——canvas满屏幕变换爱心示例相关推荐

最新文章

热门文章