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" & ...
随机推荐
- vue3路由的使用
一.路由的概要 1.1.什么是路由? 路由就是一组映射关系,根据不同的 url 地址展示不同的内容或页面(key-value): key为路径,value可能是function或component 路 ...
- K8S kubesphere安装mysql
原先我们使用Docker按照mysql时候的命令 docker run -p 3306:3306 --name mysql-01 \ -v /mydata/mysql/log:/var/log/mys ...
- 你的项目使用Optional了吗？
1.基本概念 java.util.Optional<T>类本质上就是一个容器,该容器的数值可以是空代表一个值不存在,也可以是非空代表一个值存在. 2.获取对象 2.1 相关方法 2.2 案 ...
- 手把手教你一套完善且高效的k8s离线部署方案
作者:郝建伟 背景 面对更多项目现场交付,偶而会遇到客户环境不具备公网条件,完全内网部署,这就需要有一套完善且高效的离线部署方案. 系统资源 编号 主机名称 IP 资源类型 CPU 内存 磁盘 01 ...
- JavaScript：输入语法：prompt与confirm
prompt prompt有两个参数: 第一个参数会显示在弹窗的输入框的上方: 第二个参数是可选的,会显示在输入框内,是一个初始值: 我们在输入框内输入的任何内容,都会作为返回值,返回给变量resul ...
- Flutter异常监控 - 壹 | 从Zone说起
开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第3天,点击查看活动详情 如果你正需要处理Flutter异常捕获,那么恭喜你,找对地了,这里从根源上给你准备了Flutter异常捕获 ...
- 深入理解 dbt 增量模型
想要实现数据增量写入数据库,可以选择 dbt 增量模型.通过 dbt 增量模型,我们只用专注于写日增 SQL,不用去关注于如何安全的实现增量写入. dbt 增量模型解决了什么问题 原子性写入:任何情况 ...
- [深度学习] ncnn安装和调用基础教程
目录 1 介绍 2 Ubuntu 18下ncnn安装和使用 2.1 Ubuntu 18下ncnn编译安装 2.2 Ubuntu 18下ncnn使用 3 Windows 10下ncnn安装和使用 3.1 ...
- 内网渗透-smb&wmi明文&hash传递
首先我们要知道,在windows2012以上版本默认会关闭wdigest,那么攻击者就无法从内存中获取明文密码了 windows2012以下的版本如果安装了KB2871997补丁,那么同样也会导致无法 ...
- 学习ASP.NET Core Blazor编程系列二十——文件上传（完）
学习ASP.NET Core Blazor编程系列文章之目录 学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...