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" & ...
随机推荐
- CSP-S2022 游寄
前言:最后确实寄了,因为疫情,都没考成. \(8.26\) 占坑. \(8.23\) 参加浴谷月赛初赛模拟,报的 \(S\) 组,只有 \(71\) 分. \(8.25\) \(AK\) 了同学出的比 ...
- 篇(18)-Asp.Net Core入门实战-文章管理之文章内容管理(下拉框二级结构递归)
篇(18)-Asp.Net Core入门实战-文章管理之文章内容管理(下拉框二级结构递归实现) 文章管理是CMS系统的核心表之一,存储文章内容,特点就是字段端,属性多,比如是否标识为热点.推荐等属性, ...
- i春秋broken
点开一个附带超链接的网页,直接点击file跳转到broken网页 网页里面是一个jsfuck代码 Jsfuck代码的执行方法 ①复制 ②打开firefox浏览器 ③按下F12 ④选择上方的控制台 ⑤在 ...
- EntityUtils MapStruct BeanCopier 数据实体类转换工具 DO BO VO DTO 附视频
一.序言 在实际项目开发过程中,总有数据实体类互相转换的需求,DO.BO.VO.DTO等数据模型转换经常发生.今天推荐几个好用的实体类转换工具,分别是EntityUtils MapStruct Bea ...
- 10 STL-list
重新系统学习c++语言,并将学习过程中的知识在这里抄录.总结.沉淀.同时希望对刷到的朋友有所帮助,一起加油哦! 生命就像一朵花,要拼尽全力绽放!死磕自个儿,身心愉悦! 写在前面,本篇章主要介绍S ...
- day13 I/O流——字节输入输出流、字符输入输出流 & File常用类 & （字节）复制大文件
day13 I/O流 定义:数据在两设备传输称为流,流是一组有顺序的,有起点和终点的字节集合 I 是input的缩写,表示输入流 O是output缩写,表示输出流 字节流(视频等) 输入InputSt ...
- 【实时数仓】Day02-DWD、DIM层数据准备：各层职能、行为日志DWD层、业务日志DWD层及分流（Phoenix和HBASE）
一.需求分析及实现思路 1.分层需求 建立数仓目的:增加数据计算的复用性 可以从半成品继续加工而成 从kafka的ODS层(数据一开始就读到了kafka)读用户行为数据和业务数据,并写回到kafka的 ...
- 异常处理语法结构、yield生成器及其表达式
今日内容回顾 目录 今日内容回顾 异常处理语法结构 异常处理实战应用 生成器对象 自定义range功能 yield冷门用法 yield与return对比 生成器表达式 笔试题 异常处理语法结构 异常处 ...
- ubuntu系统wireshark源码编译与安装
官网:https://www.wireshark.org/ 官方文档:Wireshark · Documentation 一 介绍 wireshark[1]是一款抓包工具.wireshark的GUI( ...
- 【kubernetes入门到精通】Kubernetes的健康监测机制以及常见ExitCode问题分析「探索篇」
kubernetes进行Killed我们服务的问题背景 无论是在微服务体系还是云原生体系的开发迭代过程中,通常都会以Kubernetes进行容器化部署,但是这也往往带来了很多意外的场景和情况.例如,虽 ...