Canvas动画(PC端 移动端)
Canvas动画(PC端 移动端)
一,介绍与需求
1.1,介绍
canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成，但功能明显要弱一些。canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能
1.2,需求
实现特殊的动画效果
二,动画实现
以跟随鼠标/手指移动的火为例
第一步:创建Canvas标签
<canvas id="fire"></canvas>
第二步:获取Canvas标签
let canvas = document.getElementById('fire');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
alert("不支持Canvas")
}
第三步:绘制火花
var Spark = function (mouse) {
this.cx = mouse.x;
this.cy = mouse.y;
this.x = rand(this.cx - 40, this.cx + 40);
this.y = rand(this.cy, this.cy + 5);
this.lx = this.x;
this.ly = this.y;
this.vy = rand(1, 3);
this.vx = rand(-4, 4);
this.r = rand(0, 1);
this.life = rand(4, 5);
this.alive = true;
this.c = {
h: Math.floor(rand(2, 40)),
s: 100,
l: rand(40, 100),
a: rand(0.8, 0.9)
}
}
Spark.prototype.update = function () {
this.lx = this.x;
this.ly = this.y;
this.y -= this.vy;
this.x += this.vx;
if (this.x < this.cx)
this.vx += 0.2;
else
this.vx -= 0.2;
this.vy += 0.08;
this.life -= 0.1;
if (this.life <= 0) {
this.c.a -= 0.05;
if (this.c.a <= 0)
this.alive = false;
}
}
Spark.prototype.draw = function (ctx) {
ctx.beginPath();
ctx.moveTo(this.lx, this.ly);
ctx.lineTo(this.x, this.y);
ctx.strokeStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + (this.c.a / 2) + ")";
ctx.lineWidth = this.r * 2;
ctx.lineCap = 'round';
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(this.lx, this.ly);
ctx.lineTo(this.x, this.y);
ctx.strokeStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + this.c.a + ")";
ctx.lineWidth = this.r;
ctx.stroke();
ctx.closePath();
}
第四步:绘制火焰
var Flame = function (mouse) {
this.cx = mouse.x;
this.cy = mouse.y;
this.x = rand(this.cx - 25, this.cx + 25);
this.y = rand(this.cy - 5, this.cy + 5);
this.vy = rand(1, 3);
this.vx = rand(-1, 1);
this.r = rand(20, 30);
this.life = rand(3, 6);
this.alive = true;
this.c = {
h: Math.floor(rand(2, 40)),
s: 100,
l: rand(80, 100),
a: 0,
ta: rand(0.8, 0.9)
}
}
Flame.prototype.update = function () {
this.y -= this.vy;
this.vy += 0.05;
this.x += this.vx;
if (this.x < this.cx)
this.vx += 0.1;
else
this.vx -= 0.1;
if (this.r > 0)
this.r -= 0.1;
if (this.r <= 0)
this.r = 0;
this.life -= 0.15;
if (this.life <= 0) {
this.c.a -= 0.05;
if (this.c.a <= 0)
this.alive = false;
} else if (this.life > 0 && this.c.a < this.c.ta) {
this.c.a += .08;
}
}
Flame.prototype.draw = function (ctx) {
ctx.beginPath();
ctx.arc(this.x, this.y, this.r * 3, 0, 2 * Math.PI);
ctx.fillStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + (this.c.a / 20) + ")";
ctx.fill();
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
ctx.fillStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + this.c.a + ")";
ctx.fill();
}
第五步:绘制火
var Fire = function () {
this.canvas = document.getElementById('fire');
this.ctx = this.canvas.getContext('2d');
this.canvas.height = window.innerHeight;// window.innerHeight
this.canvas.width = window.innerWidth;//window.innerWidth
this.aFires = [];
this.aSpark = [];
this.aSpark2 = [];
this.mouse = {
x: this.canvas.width * .5,
y: this.canvas.height * .75,
}
this.init();
}
Fire.prototype.init = function () {
//跳转语句
if (system.win || system.mac || system.xll) {
this.canvas.addEventListener('mousemove', this.updateMouse.bind(this), false);//PC端
} else {
this.canvas.addEventListener('touchmove', this.updateMouse.bind(this), false);//移动端
}
}
Fire.prototype.run = function () {
this.update();
this.draw();
if (this.bRuning)
requestAnimationFrame(this.run.bind(this));
}
Fire.prototype.start = function () {
this.bRuning = true;
this.run();
}
Fire.prototype.stop = function () {
this.bRuning = false;
}
Fire.prototype.update = function () {
this.aFires.push(new Flame(this.mouse));
this.aSpark.push(new Spark(this.mouse));
this.aSpark2.push(new Spark(this.mouse));
for (var i = this.aFires.length - 1; i >= 0; i--) {
if (this.aFires[i].alive)
this.aFires[i].update();
else
this.aFires.splice(i, 1);
}
for (var i = this.aSpark.length - 1; i >= 0; i--) {
if (this.aSpark[i].alive)
this.aSpark[i].update();
else
this.aSpark.splice(i, 1);
}
for (var i = this.aSpark2.length - 1; i >= 0; i--) {
if (this.aSpark2[i].alive)
this.aSpark2[i].update();
else
this.aSpark2.splice(i, 1);
}
}
Fire.prototype.draw = function () {
this.ctx.globalCompositeOperation = "source-over";
this.ctx.fillStyle = "rgba( 15, 5, 2, 1 )";
this.ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
this.grd = this.ctx.createRadialGradient(this.mouse.x, this.mouse.y - 200, 200, this.mouse.x, this.mouse.y - 100, 0);
this.grd.addColorStop(0, "rgb( 15, 5, 2 )");
this.grd.addColorStop(1, "rgb( 30, 10, 2 )");
this.ctx.beginPath();
this.ctx.arc(this.mouse.x, this.mouse.y - 100, 200, 0, 2 * Math.PI);
this.ctx.fillStyle = this.grd;
this.ctx.fill();
this.ctx.font = "15em Amatic SC";
this.ctx.textAlign = "center";
this.ctx.strokeStyle = "rgb(50, 20, 0)";
this.ctx.fillStyle = "rgb(120, 10, 0)";
this.ctx.lineWidth = 2;
this.ctx.strokeText("", this.canvas.width / 2, this.canvas.height * .72);
this.ctx.fillText("", this.canvas.width / 2, this.canvas.height * .72);
this.ctx.globalCompositeOperation = "overlay";//or lighter or soft-light
for (var i = this.aFires.length - 1; i >= 0; i--) {
this.aFires[i].draw(this.ctx);
}
this.ctx.globalCompositeOperation = "soft-light";//"soft-light";//"color-dodge";
for (var i = this.aSpark.length - 1; i >= 0; i--) {
if ((i % 2) === 0)
this.aSpark[i].draw(this.ctx);
}
this.ctx.globalCompositeOperation = "color-dodge";//"soft-light";//"color-dodge";
for (var i = this.aSpark2.length - 1; i >= 0; i--) {
this.aSpark2[i].draw(this.ctx);
}
}
Fire.prototype.updateMouse = function (e) {
//跳转语句
if (system.win || system.mac || system.xll) {//PC端
this.mouse.x = e.clientX;
this.mouse.y = e.clientY;
} else {//移动端
e.preventDefault();//阻止默认行为
this.mouse.x = e.changedTouches[0].clientX;
this.mouse.y = e.changedTouches[0].clientY;
}
}
第六步:调用
var oCanvas;
init = function () { oCanvas = new Fire();
oCanvas.start(); }
window.onload = init;
随机数函数
rand = function (min, max) { return Math.random() * (max - min) + min; };
效果如下：
三,PC端与移动端处理
3.1,判断是PC端还是移动端
//平台、设备和操作系统
var system = {
win: false,
mac: false,
xll: false
};
//检测平台
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); //跳转语句
if (system.win || system.mac || system.xll) {
this.canvas.addEventListener('mousemove', this.updateMouse.bind(this), false);//PC端 鼠标移动
} else {
this.canvas.addEventListener('touchmove', this.updateMouse.bind(this), false);//移动端 手指滑动
}
3.2,PC端还是移动端的事件处理
//跳转语句
if (system.win || system.mac || system.xll) {//PC端
this.mouse.x = e.clientX;
this.mouse.y = e.clientY;
} else {//移动端
e.preventDefault();//阻止默认行为
this.mouse.x = e.changedTouches[0].clientX;
this.mouse.y = e.changedTouches[0].clientY;
}
移动端需禁止缩放
<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">
Canvas动画(PC端 移动端)的更多相关文章
- 把图片画到画布上，适应PC和移动端
画一张图片到画布上 <canvas id="myCanvas" width="1000px" height="200px" >您 ...
- 用react开发一个新闻列表网站（PC和移动端）
最近在学习react,试着做了一个新闻类的网站,结合ant design框架, 并且可以同时在PC和移动端运行: 主要包含登录和注册组件.头部和脚部组件.新闻块类组件.详情页组件.评论和收藏组件等: ...
- JS判断PC和移动端设备
1.方法一 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", ...
- 前端分辨pc和移动端导入不同css
通过navigator获取浏览器,根据浏览器的不同判断出pc和移动端然后设置不同的css 分辨不同屏幕导入不同的css文件: function loadCSS() { if((navigator.us ...
- 判断PC机大小端
判断PC机大小端 #include<stdio.h> #include<stdlib.h> int main() { short a = 0x0102; char *p = ( ...
- 兼顾pc和移动端的textarea字数监控的实现方法
概述 pc端移动端中文本框监控字数的功能的一种较为简单的实现,考虑到安卓和IOS输入法输入过程中是否触发keyup的差异.利用监听compositionstart判断是否开启了输入法.从而实现体验较为 ...
- js判断是pc还是移动端
//判断pc还是移动端 var isM = function () { var ua = navigator.userAgent; /* navigator.userAgent 浏览器发送的用户代理标 ...
- 一个 VUE 组件：实现子元素 scroll 父元素容器不跟随滚动（兼容PC、移动端）
介绍 我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚 ...
- bootstrap导航栏PC端移动端之不同样式
在此之前,我先说我之所以要改变网站PC移动双端不同样式的原因. 首先我的网站用到了bootstrap响应式布局,这是我网站的PC端导航栏: 这是我网站的移动端导航栏,看着就难受: 我用谷歌浏览器F12 ...
随机推荐
- 统计学习方法9—EM算法
EM算法是一种迭代算法,是一种用于计算包含隐变量概率模型的最大似然估计方法,或极大后验概率.EM即expectation maximization,期望最大化算法. 1. 极大似然估计 在概率 ...
- 并发编程-concurrent指南-阻塞队列-数组阻塞队列ArrayBlockingQueue
ArrayBlockingQueue类是实现了BlockingQueue. ArrayBlockingQueue是一个有界的阻塞队列,其内部实现是将对象放在一个数组中. 放入元素方法: (1) add ...
- 如何搭建一个vue项目(完整步骤)
参考资料 一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的 ...
- 3.秋招复习简单整理之List、Map、Set三个接口存取元素时，各有什么特点？
List.Set都是单列元素的集合,它们有共同的父接口Collection. List存取有序可重复元素 存元素:调用add方法,存的元素先来后到,有顺序,当然也可以插队,指定存在某个位置,调用add ...
- 主机地址变更后，dubbo请求时依旧会寻址旧IP的问题
机房迁移,导致测试服务器IP变更,比原于IP为192.168.1.105变更为10.1.9.120. 服务源码未做任何变更,启动服务时依旧是旧地址请求,此问题由dubbo本地注册中心的缓存所致,清理掉 ...
- JAVA基础之JDK安装
JDK的安装与环境变量配置是JAVA开发之路的第一步,很多新人在这一步上就卡了很久,浪费了很多时间,甚至有些人就轻易地“从入门到放弃”了. 今天我们就来一步步教你如何打倒这第一只拦路虎. 1.JDK下 ...
- Contiki源码分析--CPU为cc253x里的uart0.c
我所使用的Contiki系统是contiki-sensinode.理解该文需要有cc2530里uart的相关知识,具体寄存器的用法不做介绍. 先放上所有代码,然后再仔细分析. #include < ...
- shell的用处到底大不大
我曾在智联招聘等网站上搜寻有关shell脚本员的职位,与C++.JAVA等热门语言相比,冷清很多.看上去似乎招shell程序员的公司比较少.是不是公司不重视或者是很少用到shell这个东东呢? ...
- TLS示例开发-golang版本
目录 前言 制作自签名证书 CA 服务器证书相关 客户端证书相关 证书如何验证 在浏览器中导入证书 导入证书 修改域名 golang服务端 目录 main.go 测试 参考 前言 在进行项目总结的时候 ...
- bash 遍历目录
bash遍历目录脚本traverse.sh: #!/bin/bash datadir=$ declare -a dirlist dirlist=`>/dev/null` for i in ${d ...