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 ...
随机推荐
- Jenkins使用FTP进行一键部署及回滚2（Windows）（项目实践）
转载:http://www.cnblogs.com/EasonJim/p/6295372.html Jenkins使用FTP进行一键部署及回滚2(Windows)(项目实践) 前提: 这一篇是继上一 ...
- Display PDF in browser | Acrobat, Reader XI
点这个链接查看详细的解决办法 http://helpx.adobe.com/acrobat/using/display-pdf-browser-acrobat-xi.html When you cli ...
- 斜杠反斜杠，去空格\xa0，连接函数join（）
1斜杠反斜杠 斜杠:/.反斜杠:\. 反斜杠\,在windows系统中用来表示目录. 而在unix系统中,/表示目录.由于web遵循unix命名,所以在网址(URL)中,/表示目录. 在unix系统中 ...
- C#使用互斥量(Mutex)实现多进程并发操作时多进程间线程同步操作(进程同步)的简单示例代码及使用方法
本文主要是实现操作系统级别的多进程间线程同步(进程同步)的示例代码及测试结果.代码经过测试,可供参考,也可直接使用. 承接上一篇博客的业务场景[C#使用读写锁三行代码简单解决多线程并发写入文件时线程同 ...
- JQuery和JS操作LocalStorage/SessionStorage的方法（转）
出处:http://blog.csdn.net/djzhao627/article/details/50747628 首先说一下LocalStorage和SessionStorage LocalSto ...
- linux计划任务（一）
一次性计划任务 at /etc/init.d/atd [root@localhost ~]# at : at> /bin/ls /etc |wc -l > /tmp/yimiao_demo ...
- .NET基础 （19）多线程
多线程编程的基本概念1 请解释操作系统层面上的线程和进程2 多线程程序在操作系统里是并行执行的吗3 什么是纤程 .NET中的多线程1 如何在.NET程序中手动控制多个线程2 如何使用.NET的线程池3 ...
- intrinsicConditionQueue笔记
一, 使用conditionQueue需要注意的一些点: 一个conditionQueue被多种Predicate condition 使用是很正常的,所以当一个wait的线程被唤醒的时候,很有可能它 ...
- Android源码设计模式分析开源项目
简述 该项目通过分析Android系统中的设计模式来提升大家对设计模式的理解,从源码的角度来剖析既增加了对Android系统本身的了解,也从优秀 的设计中领悟模式的实际运用以及它适用的场景,避免在实际 ...
- 搭建 .NET Core 开发环境
安装 .Net Core 执行代码 任务时间:时间未知 .NET Core 的官方文档很详细,本实验带你建立一个.NET Core 1.1的Web运行环境,更多内容可以可以查阅微软官方文档. 安装 . ...