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" & ...
随机推荐
- 如何在 .NET MAUI 中加载 json 文件？
引言: 按core传统方式添加 AddJsonFile("appsettings.json") 在windows平台和ssr工作正常,但是在 ios 和 android 无法用这种 ...
- ftp多用户多目录配置
测试环境:centos7 1. 装包与卸载 yum -y install vsftpd yum -y autoremove vsftpd&&rm -rf /etc/vsftpd /et ...
- HDLBits答案——Circuits
1 Combinational Logic 1.1 Basic Gates 1.1.1 Exams/m2014 q4h module top_module ( input in, output out ...
- 基于python的数学建模---场线与数值解（微分方程）
import numpy as np from scipy import integrate import matplotlib.pyplot as plt import sympy def plot ...
- C++初阶（vector容器+模拟实现）
迭代器 四种迭代器 容器类名::iterator 迭代器名;//正向迭代器 容器类名::const_iterator 迭代器名;//常量正向迭代器,const修饰,只能用于读取容器内的元素,不能改变其 ...
- typora使用CSDN图床
前言 软件下载地址 typora 是一款好用的 markdown 文档编辑器. 我之前研究过CSDN上传图片的接口,前几天发现了Typora 这个好用的软件,可以自定义图床,因为我很多文章图片资源用的 ...
- 大趋智能打印机java api
对接飞鹅和易联云后 ,网上几乎没资料对大趋智能打印机java api分享,故此分享一波. 官方文档地址 SnParam.java package com.shanheyongmu.openapi.pa ...
- Day26：内部类的详解
内部类 1.1内部类概述 内部类:就是在一个类中定义另外一个类. 例如我们在A类中定义一个B类,那么B类就是A类的内部类,A则是B的外部类. 好比我们的手机是一个类,而手机内部的零件又属于一个类. 内 ...
- 命令查询职责分离 - CQRS
概念 CQRS是一种与领域驱动设计和事件溯源相关的架构模式, 它的全称是Command Query Responsibility Segregation, 又叫命令查询职责分离, Greg Young ...
- Java实现Excel批量导入数据库
场景说明 在实际开发中,经常需要解析Excel数据来插入数据库,而且通常会有一些要求,比如:全部校验成功才入库.校验成功入库,校验失败返回提示(总数.成功数.失败数.失败每行明细.导出失败文件明细-) ...