<!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绘制序列帧动画的更多相关文章

  1. canvas+js绘制序列帧动画+面向对象

    效果: 素材: 源码:(一般的绘制方式) <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  2. 小程序利用canvas 绘制图案 （生成海报， 生成有特色的头像）

    小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...

  3. JavaScript动画基础：canvas绘制简单动画

    动画是将静止的画面变为动态的艺术．实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...

  4. canvas绘制简易动画

    在canvas画布中制作动画相对来说很简单,实际上就是不断变化的坐标.擦除.重绘的过程 1.使用setInterval方法设置动画的间隔时间. setInterval(code,millisec) s ...

  5. [canvas]利用canvas绘制自适应的折线图

    前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...

  6. 利用canvas绘制带干扰线的验证码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. js利用canvas绘制爱心

    js代码如下: var cav = document.getElementById("a").getContext("2d"); function draw(x ...

  8. HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识

    一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...

  9. html5新特性canvas绘制图像

    在前端页面开发过程中偶尔会有需要对数据进行相应的数学模型展示,或者地理位置的动态展示,可能就会想到用canvas,网上有很多已经集成好的,比如说类似echarts,确实功能非常强大,而且用到了canv ...

随机推荐

  1. thunderbird中如何设置QQ邮箱

    thunderbird和其他客户端设置是类似的. 我们发现您尝试设置POP3/SMTP服务,但设置未成功. 您可以检查以下的细节来解决:  您是否在邮箱中开启了这项服务,如果尚未开启,请您在[邮箱设置 ...

  2. svn备份与还原_脚本_(dump命令)

    今天备份svn, 能保证好用就行先, 回头再研究 buerguo.bat @echo off :: 关闭回显 :: 说明:如有命令不明白,请使用帮助命令:命令/? .如:for/? :: 设置标题 t ...

  3. keras中的loss、optimizer、metrics

    用keras搭好模型架构之后的下一步,就是执行编译操作.在编译时,经常需要指定三个参数 loss optimizer metrics 这三个参数有两类选择: 使用字符串 使用标识符,如keras.lo ...

  4. 【虚拟化系列】VMware vSphere 5.1 简介与安装

    一. VMware vSphere 5.1简介           vSphere是VMware推出的基于云计算的新一代数据中心虚拟化套件,提供了虚拟化基础架构.高可用性.集中管理.监控等一整套解决方 ...

  5. 如何用STAF进行自动化测试分布式运行

    本文的目的在于引导读者去了解STAF及如何调用其接口去实现自动化测试的分布式动行. 提到分布式运行,很多人想到了Jenkins,Jenkins里面有个node插件,可以去分派任务给slave,Jenk ...

  6. 关于使用coreseek并为其做分页的介绍(转)

    coreseek 做分页时找数据总量还真不好找.以为他会给一个方法(函数)什么的去获取,结果却不是.首先需要了解:num_matches: 当前返回的结果数,<= limit设置值.max_ma ...

  7. Windows 10安装DockerToolBox失败处理方法

    指令运行报错: Windows 10安装DockerToolBox失败处理方法:升级Windows 10. (注意:只有Windows10 专业版才支持升级,Server和企业版无效)

  8. ASP.NET MVC同时支持web与webapi模式

    原文地址:https://blog.csdn.net/laymat/article/details/65444701 我们在创建 web mvc项目时是不支持web api的接口方式访问的,所以我们需 ...

  9. Android开发之AsyncTask的使用

    Android API 3时引进了AsyncTask,也叫异步任务.使用它可以很方便的更新主线程中的UI,使用它比Handler.Thread更简单.由于AsyncTask是抽象类,要使用它首先要创建 ...

  10. 冒泡，setinterval，背景图的div绑定事件，匿名函数问题探究

    1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b" ...