Html5 canvas创意特效合集
Canvas就像一块画布，我们可以通过调用脚本在Canvas上绘制任意形状，甚至是制作动画。本文就是收集了很多非常富有创意的一些canvas动画特效例子，这些例子都非常适合大家学习。更多源码可在在这里资源站 -源码部分预览下载 持续更新中
1.3D篝火动画特效
这款篝火特效是基于 three.js 和 canvas 制作的3D动画特效 跟我们平常野外生火烤火很像 鼠标滚轮滚动还可以放大缩小篝火
2.淋雨闪电特效
基于canvas的淋雨特效 和 闪电特效
```html
<body>
<title>Raining with Thunder</title>
<canvas id="canvas" width="1280" height="720"
style="height: 362px; width: 643px; margin-left: 52px; margin-top: 0px;"></canvas>
<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>
</body>
```
3.精美表单切换模板
Html5 流畅的切换登录注册表单 且带有特效
```html
<body>
<div class="container right-panel-active">
<!-- Sign Up -->
<div class="container__form container--signup">
<form action="#" class="form" id="form1">
<h2 class="form__title">Sign Up</h2>
<input type="text" placeholder="User" class="input" />
<input type="email" placeholder="Email" class="input" />
<input type="password" placeholder="Password" class="input" />
<button class="btn">Sign Up</button>
</form>
</div>
<!-- Sign In -->
<div class="container__form container--signin">
<form action="#" class="form" id="form2">
<h2 class="form__title">Sign In</h2>
<input type="email" placeholder="Email" class="input" />
<input type="password" placeholder="Password" class="input" />
<a href="#" class="link">Forgot your password?</a>
<button class="btn">Sign In</button>
</form>
</div>
<!-- Overlay -->
<div class="container__overlay">
<div class="overlay">
<div class="overlay__panel overlay--left">
<button class="btn" id="signIn">Sign In</button>
</div>
<div class="overlay__panel overlay--right">
<button class="btn" id="signUp">Sign Up</button>
</div>
</div>
</div>
</div>
<!-- partial -->
<script src="./js/script.js"></script>
</body>
```
4.新年倒计时
马上临近圣诞和元旦了 还没有圣诞树的朋友可以查看 [圣诞合集](https://www.hereitis.cn/articleDetails/969) 下面是有关元旦倒计时的特效效果图
5.粒子文字特效
可自己修改默认的文字 同时还支持手动输入文字
6.时间动画特效
这是一款基于canvas的时间显示特效 每秒都有粒子掉落显示的动画 还是非常精美的 也适合部署在自己的网站内
7.粒子倒计时
粒子聚合组成的一个个数字的切换 也是很巧妙的 适合学习和作为课后练习使用
```html
<body>
<script src="js/TweenMax.min.js"></script>
<canvas id="canvas-number"></canvas>
<canvas id="canvas-dots"></canvas>
<script src="js/script.js"></script>
</body>
```
8.烟雾文字消散特效
这是一款 跟蒸汽一样 慢慢的扩散消逝掉 不会像火焰一样只存在瞬间的美
```html
<body>
<canvas id="myCanvas"></canvas>
<div class="text">
<span>S</span>
<span>m</span>
<span>o</span>
<span>k</span>
<span>e</span>
<span> </span>
<span>烟</span>
<span>雾</span>
<span>消</span>
<span>散</span>
</div>
<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>
</body>
```
Html5 canvas创意特效合集的更多相关文章
- 16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- 分享8款令人惊叹的HTML5 Canvas动画特效
HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我们更加可以欣赏到超酷的动画特效.今天我从html5tricks网站上整理了8款令人惊叹的 ...
- 16个非常有趣的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- 纯JavaScript实现HTML5 Canvas六种特效滤镜
纯JavaScript实现HTML5 Canvas六种特效滤镜 小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfi ...
- CSS3悬停特效合集Hover.css
CSS3悬停特效合集Hover.css是一款特效丰富,支持2D变化特效.边框特效.阴影特效等: 使用简单,可直接复制相关特效代码,快速应用到元素上. 源码地址:http://www.huiyi8.co ...
- Canvas 放烟花合集 -- 用粉丝头像做成烟花绽放🧨
"我对着烟花许愿,希望你永远在我身边" "凑不够满天星辰那就去看看烟花吧,人间烟火气,最抚凡人心" 小tips:喜欢的可以关注博主私信代码噢~ 也可以看看前面两 ...
- html5 canvas 粒子特效
不知不觉就已经好久没写过博客了,自从七月正式毕业后,离开了实习了将近九个月的老东家,进了鼠厂后,做的事都是比较传统的前端活,之前在tpy的时候只管做移动h5的特效以及小游戏,再加上实习所以时间比较充裕 ...
- 14个HTML5实现的效果合集
HTML5可不是什么虚幻的概念,与其高谈阔论的讨论HTML5未来的趋势和价值,不如一起研究一下现在的HTML5可以做出哪些成果,可以让我们做出出色的产品. Form Follows Function就 ...
- HTML5 canvas 创意：飞翔的凤凰
当我看到这件作品的时候,我表示非常喜欢.这个作品的产生不仅仅需要编程和算法,作者肯定是个充满了艺术细胞的人.倘若有什么canvas艺术作品比赛的话,我想它就是获奖的那个. 先观赏下演示吧.注意,要看到 ...
- 特效合集（原生JS代码）适合初学者
1.返回顶部(完全兼容各个浏览器,不含美化) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" & ...
随机推荐
- bootstrap-table参数
table.bootstrapTable({ url:'/Home/geurl', //请求后台的URL(*) method:'get', //请求方式(*) toolbar:'#toolbar', ...
- K8S之prometheus-operator监控
prometheus-operator 1. Prometheus Operator介绍 介绍文章:http://t.zoukankan.com/twobrother-p-11164391.html ...
- 1、Docker最新入门教程-Docker概述
1. Docker概述 Docker 是一个用于开发.运输和运行应用程序的开放平台.Docker 使您能够将应用程序与基础架构分开,以便您可以快速交付软件.使用 Docker,您可以像管理应用程序一样 ...
- MQ系列8：数据存储，消息队列的高可用保障
MQ系列1:消息中间件执行原理 MQ系列2:消息中间件的技术选型 MQ系列3:RocketMQ 架构分析 MQ系列4:NameServer 原理解析 MQ系列5:RocketMQ消息的发送模式 MQ系 ...
- qtcreator 报错error: You need to set an executable in the custom run configuration.
解决 没有配置运行的可执行文件. 在 Executable 中填入正确的可执行文件位置,这里我使用了一个变量,可以根据 release,debug的区别自动找到对应的可执行文件.
- 关于虚拟机使用桥接网络访问不到物理机IP的问题解决
问题描述 物理机可以ping 到虚拟机IP,虚拟机 ping 不到物理机IP 解决方法 关闭物理机防火墙,重启虚拟机
- vulnhub靶场之LOOZ: 1
准备: 攻击机:虚拟机kali.本机win10. 靶机:looz: 1,下载地址:https://download.vulnhub.com/looz/Looz.zip,下载后直接vbox打开即可. 知 ...
- nginx配置文件讲解及示例（可复制）
详细的配置说明参考:https://www.cnblogs.com/ghl1024/p/9013805.html [示例一] #运行用户user www-data; #启动进程,通常设置成和cpu ...
- 数值计算：前向和反向自动微分(Python实现)
1 自动微分 我们在<数值分析>课程中已经学过许多经典的数值微分方法.许多经典的数值微分算法非常快,因为它们只需要计算差商.然而,他们的主要缺点在于他们是数值的,这意味着有限的算术精度和不 ...
- WCF 服务容器化的一些问题
背景 目前项目当中存有 .NET Framework 和 .NET Core 两种类型的项目,但是都需要进行容器化将其分别部署在 Windows 集群和 Linux 集群当中.在 WCF 进行容器化的 ...