canvas+js绘制序列帧动画+面向对象
效果：
素材：
源码：（一般的绘制方式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制序列帧动画</title>
</head>
<body>
<canvas id="demo"></canvas>
<button type="button" id="up">↑</button>
<button type="button" id="right">→</button>
<button type="button" id="down">↓</button>
<button type="button" id="left">←</button>
<script type="text/javascript">
(function () {
var canvas = document.getElementById("demo");
var up = document.getElementById("up");
var right = document.getElementById("right");
var down = document.getElementById("down");
var left = document.getElementById("left");
//设置宽高不从css中设置
canvas.width = 200;//设置canvas宽
canvas.height = 200;//设置canvas高
canvas.style.border = "1px solid red";
//获取上下文
var ctx = canvas.getContext("2d");
//加载图片
var img = new Image();
img.src = "img/dh.png";
var frameIndex = 0,dirIndex = 0;
up.onclick = function (ev) {
dirIndex = 3;
}
right.onclick = function (ev) {
dirIndex = 2;
}
down.onclick = function (ev) {
dirIndex = 0;
}
left.onclick = function (ev) {
dirIndex = 1;
}
img.onload = function () {
setInterval(function () {
//清除 之前的 图片墨迹。
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(
img
, frameIndex*40 //截取原始图片的 x坐标
, dirIndex*65 //截取原始图片的 y坐标
, 40 //截取原始图片的 宽度
, 65 // 截取的高度
, 20 //图片在canvas画布上的x坐标
, 20 //图片在canvas画布上的y坐标
, 80 //绘制图片的宽度
, 65 *2 //绘制图片的高度
);
frameIndex++;// 添加到下一帧
frameIndex %=4;// 取余数 7 %4 = 3 3%4 =3 4%4 =0
console.log(frameIndex);
},100)
}
}());
</script>
</body>
</html>
源码：(面向对象的绘制方式)
Sprite.js
function Sprite(option) {
this._init(option);
}
Sprite.prototype = {
//初始化 imgsrc,frameIndex,dirIndex,originW,originH,x,y,w,fps
_init:function (option) {
this.img_src = option.img_src || "img/dh.png";//精灵图src
this.framIndex = 0;//截取精灵图其实位置的X轴坐标
this.dirIndex = 0;//截取精灵图其实位置的Y轴坐标
this.originW = option.originW || 40;//截取精灵图的宽度
this.originH = option.originH || 65;//截取精灵图的高度
this.x = option.x || 20;//动画放置的原点X轴
this.y = option.y || 20;//动画放置的原点Y轴
this.w = option.w || 40*2;//动画的宽度
this.h = option.h || 65*2;//动画的高度
this.fps = option.fps || 10; // 动画绘制的帧数
},
//渲染动画
render:function (ctx) {
var img = new Image();
img.src = this.img_src;
var self = this;
var frameIndex = this.framIndex;
img.onload = function (ev) {
setInterval(function () {
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.drawImage(
img //绘制的原始图片
, frameIndex*self.originW //截取原始图片的 x坐标
, self.dirIndex*self.originH //截取原始图片的 y坐标
, self.originW //截取原始图片的 宽度
, self.originH // 截取的高度
, self.x //图片在canvas画布上的x坐标
, self.y //图片在canvas画布上的y坐标
, self.w //绘制图片的宽度
, self.h //绘制图片的高度
)
frameIndex++;
frameIndex %= 4;
},1000/self.fps)
}
},
//改变方向：
changeDir:function (dir) {
if( dir == 'left' ) {
this.dirIndex = 1;
}
if( dir == 'right' ) {
this.dirIndex = 2;
}
if( dir == 'up' ) {
this.dirIndex = 3;
}
if( dir == 'down' ) {
this.dirIndex = 0;
}
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js面向对象绘制序列帧动画</title>
<script type="text/javascript" src="js/Sprite.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<button type="button" id="up">↑</button>
<button type="button" id="right">→</button>
<button type="button" id="down">↓</button>
<button type="button" id="left">←</button>
<script>
var canvas = document.getElementById("canvas");
var up = document.getElementById("up");
var right = document.getElementById("right");
var down = document.getElementById("down");
var left = document.getElementById("left");
//设置宽高不从css中设置
canvas.width = 200;//设置canvas宽
canvas.height = 200;//设置canvas高
canvas.style.border = "1px solid red";
//获取上下文
var ctx = canvas.getContext("2d");
var s = new Sprite({
img_src:"img/dh.png" //绘制的原始图片
, originW:40 //截取原始图片的 宽度
, originH:65 // 截取的高度
, x:20 //图片在canvas画布上的x坐标
, y:20 //图片在canvas画布上的y坐标
, w:40*2 //绘制图片的宽度
, h:65*2 //绘制图片的高度
, fps:10
});
s.render(ctx);//渲染动画
up.onclick = function (ev) {
s.changeDir("up");
}
right.onclick = function (ev) {
s.changeDir("right");
}
down.onclick = function (ev) {
s.changeDir("down");
}
left.onclick = function (ev) {
s.changeDir("left");
}
</script>
</body>
</html>
canvas+js绘制序列帧动画+面向对象的更多相关文章
- 利用canvas绘制序列帧动画
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- canvas+js绘制折线图
效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 基于canvas与原生JS的H5动画引擎
前一段时间项目组里有一些H5动画的需求,由于没有专业的前端人员,便交由我这个做后台的研究相关的H5动画技术. 通过初步调研,H5动画的实现大概有以下几种方式: 1.基于css实现 这种方式比较简单易学 ...
- canvas绘制简易动画
在canvas画布中制作动画相对来说很简单,实际上就是不断变化的坐标.擦除.重绘的过程 1.使用setInterval方法设置动画的间隔时间. setInterval(code,millisec) s ...
- Android中使用SurfaceView和Canvas来绘制动画
事实上每一个View中都有Canvas能够用来绘制动画.仅仅须要在这个View中重载onDraw()方法就能够,可是SurfaceView类是一个专门用来制动动画的类. Canvas(中文叫做&quo ...
- JavaScript动画基础：canvas绘制简单动画
动画是将静止的画面变为动态的艺术．实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...
- canvas学习之制作动画
html部分 ...... <body> <canvas id="myCanvas" width="400" height="400 ...
- html5 canvas高级贝塞尔曲线运动动画(好吧这一篇被批的体无完肤！都说看不懂了！没办法加注释了！当然数学不好的我也没办法了，当然这还涉及到一门叫做计算机图形学的学科)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Canvas制作的下雨动画
简介 在codepen上看到一个Canvas做的下雨效果动画,感觉蛮有意思的.就研究了下,这里来分享下,实现技巧.效果可以见下面的链接. 霓虹雨: http://codepen.io/natewile ...
随机推荐
- DataTable记录
DataTable dt2 = dt.Copy();//复制结构和数据 //复制结构,不要数据 DataTable dt2 = new DataTable(); for (int i = 0; i & ...
- Python里seed（）函数
seed()函数的功功能是每次改变随机数生成器的种子,会改变下一次随机数模块生成的随机数.seed()方法在每次调用随机函数之前使用. 如果种子不变,那么随机函数生成的随机数相同,例如: #!/usr ...
- Spring Boot配置FastJson报错'Content-Type' cannot contain wildcard type '*'
升级到最新版本的fastjson以后报的错,查了一下资料,发现 fastjson从1.1.41升级到1.2.28之后,请求报错:json java.lang.IllegalArgumentExcept ...
- js 中的 2 与 "2"
case1: "15" * 2 结果:30 case2: 2 * "15" 结果:30 case3: "2" * "15" ...
- java并发编程实战：第十二章---并发程序的测试
并发程序中潜在错误的发生并不具有确定性,而是随机的. 安全性测试:通常会采用测试不变性条件的形式,即判断某个类的行为是否与其规范保持一致 活跃性测试:进展测试和无进展测试两方面,这些都是很难量化的(性 ...
- underscore arrays
1._.first():返回array(数组)的第一个元素.传递 n参数将返回数组中从第一个元素开始的n个元素 _.first = _.head = _.take = function(array, ...
- Java Float类型 减法运算时精度丢失问题
package test1; public class Test2 { /*** @param args*/public static void main(String[] args) { Flo ...
- Oracle Submit Request - 请求的调用方法: FND_REQUEST.SUBMIT_REQUEST
废话: 有一段时间没搞过开发了,做项目又要重新找回点开发的记忆.重新拾回一点点零碎. 跑多了产线,配置的一些参数也忘记得差不多了,长时间没动就是易遗忘,找点资料做个笔记就是时间保镖. 正题: FN ...
- ASP.NET Core2调用Azure云上的PowerBI报表展示
在开发企业应用中,报表功能是当之无愧的重头戏,如何将数据通过合适的报表呈现出来成为每个项目人员必需面临的问题.而找到一款合适的报表往往都需要考率价格.开发.风格.支撑等因素.那么,我在这里给大家介绍一 ...
- PHP全栈学习笔记19
thinkphp框架是一个免费的,开源,快速,简单的面向对象的轻量级PHP开发框架. 了解什么是thinkphp概述,thinkphp项目目录结构,thinkphp的控制器,视图,thinkphp项目 ...