最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

全球热点评！Html5 canvas创意特效合集

来源：博客园

Canvas就像一块画布，我们可以通过调用脚本在Canvas上绘制任意形状，甚至是制作动画。本文就是收集了很多非常富有创意的一些canvas动画特效例子，这些例子都非常适合大家学习。更多源码可在在这里资源站 -源码部分预览下载 持续更新中


(资料图片仅供参考)

1.3D篝火动画特效

这款篝火特效是基于 three.js 和 canvas 制作的3D动画特效 跟我们平常野外生火烤火很像 鼠标滚轮滚动还可以放大缩小篝火

2.淋雨闪电特效

基于canvas的淋雨特效 和 闪电特效

```htmlRaining with Thunder<script id="rendered-js">var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var stgw = 1280;var stgh = 720;var loffset = 0;var toffset = 0;function _pexresize() {var cw = window.innerWidth;var ch = window.innerHeight;if (cw <= ch * stgw / stgh) {loffset = 0;toffset = Math.floor(ch - cw * stgh / stgw) / 2;canvas.style.width = cw + "px";canvas.style.height = Math.floor(cw * stgh / stgw) + "px";} else {loffset = Math.floor(cw - ch * stgw / stgh) / 2;toffset = 0;canvas.style.height = ch + "px";canvas.style.width = Math.floor(ch * stgw / stgh) + "px";}canvas.style.marginLeft = loffset + "px";canvas.style.marginTop = toffset + "px";}_pexresize();var count = 100;var lcount = 6;

var layer = [];var layery = [];

ctx.fillStyle = "rgba(255,255,255,0.5)";for (var l = 0; l < lcount; l++) {ctx.clearRect(0, 0, stgw, stgh);for (var i = 0; i < count * (lcount - l) / 1.5; i++) {var myx = Math.floor(Math.random() * stgw);var myy = Math.floor(Math.random() * stgh);var myh = l * 6 + 8;var myw = myh / 10;ctx.beginPath();ctx.moveTo(myx, myy);ctx.lineTo(myx + myw, myy + myh);ctx.arc(myx, myy + myh, myw, 0, 1 * Math.PI);ctx.lineTo(myx - myw, myy + myh);ctx.closePath();ctx.fill();}layer[l] = new Image();layer[l].src = canvas.toDataURL("image/png");layery[l] = 0;}var stt = 0;var str = Date.now() + Math.random() * 4000;var stact = false;

function animate() {ctx.clearRect(0, 0, stgw, stgh);

for (var l = 0; l < lcount; l++) {layery[l] += (l + 1.5) * 5;if (layery[l] > stgh) {

layery[l] = layery[l] - stgh;}ctx.drawImage(layer[l], 0, layery[l]);ctx.drawImage(layer[l], 0, layery[l] - stgh);}if (Date.now() > str) {stact = true;}if (stact) {stt++;if (stt < 5 + Math.random() * 10) {var ex = stt / 30;} else {var ex = (stt - 10) / 30;}if (stt > 20) {stt = 0;stact = false;str = Date.now() + Math.random() * 8000 + 2000;}

ctx.fillStyle = "rgba(255,255,255," + ex + ")";ctx.fillRect(0, 0, stgw, stgh);}window.requestAnimationFrame(animate);}animate();</script>

```

3.精美表单切换模板

Html5 流畅的切换登录注册表单 且带有特效

```html

<script src="./js/script.js"></script>

```

4.新年倒计时

马上临近圣诞和元旦了 还没有圣诞树的朋友可以查看 [圣诞合集](https://www.hereitis.cn/articleDetails/969) 下面是有关元旦倒计时的特效效果图

5.粒子文字特效可自己修改默认的文字 同时还支持手动输入文字

6.时间动画特效这是一款基于canvas的时间显示特效 每秒都有粒子掉落显示的动画 还是非常精美的 也适合部署在自己的网站内

7.粒子倒计时

粒子聚合组成的一个个数字的切换 也是很巧妙的 适合学习和作为课后练习使用

```html

<script src="js/TweenMax.min.js"></script>

<script src="js/script.js"></script>

```

8.烟雾文字消散特效

这是一款 跟蒸汽一样 慢慢的扩散消逝掉 不会像火焰一样只存在瞬间的美

```html

Smoke 烟雾消散

<script type="text/javascript" src="js/three.min.js"></script><script type="text/javascript" src="js/Stats.js"></script><script type="text/javascript" src="js/script.js"></script>

```

关键词： 制作动画 鼠标滚轮 任意形状