<!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. Delphi消息推送

    移动端的消息推送大家都体验过,智能手机上一大堆广告等各种消息会不时从消息栏中弹出来骚扰你. PC程序中我们有时也会用到消息推送,比如通知之类.通常我们使用的方法可能更多地使用Socket之类来处理,有 ...

  2. SaltStack 入门到精通第三篇：Salt-Minion配置文件详解

    SaltStack 入门到精通第三篇:Salt-Minion配置文件详解 作者:ArlenJ  发布日期:2014-06-09 17:52:16   ##### 主要配置设置 ##### 配置 默认值 ...

  3. ubuntu 51单片机环境搭建方法

    首先下载个sdcc 1: sudo apt-get install sdcc 2: sudo apt-get install libvte-dev3: 安装 gSTC-ISP 下载地址:http:// ...

  4. 使用Nexus搭建Maven服务器详细配置【转】

    为什么要搭建nexus私服,原因很简单,有些公司都不提供外网给项目组人员,因此就不能使用maven访问远程的仓库地址,所以很有必要在局域网里找一台有外网权限的机器,搭建nexus私服,然后开发人员连到 ...

  5. js中文乱码问题，编码设为utf-8，但还是乱码问题。

    dw中编辑js的时候使用另存为菜单,在存储的时候勾选上一个叫[包括Unicode签名(BOM)(S)]的选项,然后存储.再次在浏览器源码中查看的时候js的中文就正常显示了,查看属性,编码也是UTF-8 ...

  6. PHP 将html页面导出至Word

    <?php header("Content-Type: application/msword"); header("Content-Disposition: att ...

  7. LINQ中in的实现方法-LINQ To Entities如何实现查询 select * from tableA where id in (1,2,3,4)

    如果用in是字符串类型无问题,可以直接这样用 ).Where(entity => urls.Contains((entity.NavigateUrl == null ? "" ...

  8. ubuntu14.4.4安装smb服务实现文件共享

    1.软件安装,ubuntu14需要安装的软件有3个 安装服务前养成习惯 sudo apt-get upgrade 首先切换到超级用户  su - root sudo apt-get install s ...

  9. iphone5刷机教程

    如果不想麻烦可以在越狱之后添加源,cydia.china3gpp.com打ios7的补丁就可以了 机器为iphone5 美国sprint有锁版 1. 首先备份需要的程序和数据(把各种缓存的影片删掉再备 ...

  10. 滴滴passport设计之道:帐号体系高可用的7条经验

    导读:应对高可用及极端峰值,每个技术团队都有自己的优秀经验,但是这些方法远没有得到体系化的讨论.高可用架构在 6 月 25 日举办了『高压下的架构演进』专题活动,进行了闭门私董会研讨及对外开放的四个专 ...