利用canvas绘制序列帧动画
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="container">
<canvas id="cavsElem">
你的浏览器不支持canvas，请升级浏览器
</canvas>
<button id="btn-dir-left">向左</button>
<button id="btn-dir-right">向右</button>
<button id="btn-dir-up">向后</button>
<button id="btn-dir-down">向前</button>
</div>
<script>
(function(){
var canvas = document.querySelector( '#cavsElem' );
var ctx = canvas.getContext( '2d' );
canvas.width = 200;
canvas.height = 200;
canvas.style.border = "1px solid #000";
var dirIndex=0;//设置方向的索引
//加载图片
var img=new Image();
img.src='gameImgs/DMMban.png';
//绘制精灵图片
img.onload=function(){
var frameIndex=0;
setInterval(function(){
//清除 之前的 图片墨迹的第一种方法：。
ctx.clearRect(0,0,canvas.width,canvas.height);
// 第二种方法：canvas.width=canvas.width
ctx.drawImage(
img
,frameIndex*45//截取原始图片的 x坐标
,dirIndex*65//截取原始图片的 y坐标
,40//截取原始图片的 宽度
,65 // 截取的高度
,200//图片在canvas画布上的x坐标
,200//图片在canvas画布上的y坐标
,80//绘制图片的宽度
,130//绘制图片的高度
);
frameIndex++;
frameIndex%=4;//要求frameIndex的值小于等于四
},1000/10)
}
}());
</script>
</body>
</html>
利用canvas绘制序列帧动画的更多相关文章
- canvas+js绘制序列帧动画+面向对象
效果: 素材: 源码:(一般的绘制方式) <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- 小程序利用canvas 绘制图案 （生成海报， 生成有特色的头像）
小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...
- JavaScript动画基础：canvas绘制简单动画
动画是将静止的画面变为动态的艺术．实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...
- canvas绘制简易动画
在canvas画布中制作动画相对来说很简单,实际上就是不断变化的坐标.擦除.重绘的过程 1.使用setInterval方法设置动画的间隔时间. setInterval(code,millisec) s ...
- [canvas]利用canvas绘制自适应的折线图
前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...
- 利用canvas绘制带干扰线的验证码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js利用canvas绘制爱心
js代码如下: var cav = document.getElementById("a").getContext("2d"); function draw(x ...
- HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识
一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...
- html5新特性canvas绘制图像
在前端页面开发过程中偶尔会有需要对数据进行相应的数学模型展示,或者地理位置的动态展示,可能就会想到用canvas,网上有很多已经集成好的,比如说类似echarts,确实功能非常强大,而且用到了canv ...
随机推荐
- [转载]JDBC/Spring/MyBatis性能比较
原文地址:JDBC/Spring/MyBatis性能比较作者:tom_lt 测试目的: 比较JDBC,SpringJdbc和MyBatis的性能. 测试用例: 1. 查询:查询一张10000条数据 ...
- 谈UIView Animation编程艺术
一.大小动画(改变frame) -(void)changeFrame{ CGRect originalRect = self.anView.frame; CGRect rect = CGRectMak ...
- 上海租房找房建议及条件，上海IT行业开发常见公司的位置地点
上海租房,找房条件 以2号地铁线为中心,优先选择(回家方便,重点!),交通设施较集中地铁:2,3,4 区:普陀区,静安区,长宁区,闸北区,浦东新区,闵行区,徐汇区 路:镇坪路,威宁路,娄山关路,中山公 ...
- Linux下DIR，dirent,stat等结构体详解（转）
最近在看Linux下文件操作相关章节,遇到了这么几个结构体,被搞的晕乎乎的,今日有空,仔细研究了一下,受益匪浅. 首先说说DIR这一结构体,以下为DIR结构体的定义: struct __dirstre ...
- HDU 4607 Park Visit （树的最长链）
Park Visit Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- MySql随手记要
1. 显示当前正在执行的进程. SHOW FULL PROCESSLIST 2. 显示执行计划. EXPLAIN SQL语句. 3. 强制使用索个索引. 在表名后面接 FORCE INDEX(索引名称 ...
- 高并发分布式系统中生成全局唯一（订单号）Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数
高并发分布式系统中生成全局唯一(订单号)Id 1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...
- AndroidStudio编译错误：Error: null value in entry: blameLogFolder=null
今天写项目的时候,电脑开了个WiFi热点,然后这个热点和window驱动不兼容,有时候会导致电脑重启,重启之后AndroidStudio编译就报错了, Error: null value in ent ...
- MFC带标题栏的窗口和不带标题栏的窗口最大化
原文链接: http://blog.csdn.net/smartgps2008/article/details/7741223 不带标题栏的窗口最大化: 第一种情况:覆盖任务栏 ShowWindow( ...
- java对存放实体的list进行排序
java对存放实体的list进行排序: List<DistributionAgentsEntity> allAgents = new ArrayList<DistributionAg ...