<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>绘制小人动画</title>

     <style>

         canvas{

             border: 1px solid green;

         }

     </style>

 </head>

 <body>

     <!-- 绘制小人动画 -->

     <canvas width="400" height="600" id="canvas"></canvas>

 </body>

 <script>

     var canvas = document.getElementById('canvas');

     var ctx = canvas.getContext('2d');

     function toAngle(radian){

         return radian*180/Math.PI;

     }

     function toRadian(angle){

         return angle*Math.PI/180;

     }

     function img(ctx,element,x0,y0){

         var x = x0,

             y = y0;

         element.onload = function(){

             var width = element.width/4,

             height = element.height/4;

             var i = 0,

                 j = 0,

                 a = 0;

             setInterval(function(){

                 //x = x + a;

                 ctx.clearRect(x,y,width,height);

                 ctx.drawImage(element,width*i,height*j,width,height,x,y,width,height);

                 i ++;

                 if(i == 4){

                     setTimeout(function(){

                         i = 0;

                         if(j == 0){

                             j =1;

                             //a-=10;

                         }else if(j == 1){

                             j = 3;

                         }else if(j == 2){

                             j = 0;

                         }else if(j == 3){

                             j = 2;

                             //a+=10;

                         }

                     },20)

                 }

             },200)

         }

     };

         var img1 = new Image();

         img1.src = 'imgs/game1.png';

         var img2 = new Image();

         img2.src = 'imgs/game2.png';

         var img3 = new Image();

         img3.src = 'imgs/game3.png';

         var img4 = new Image();

         img4.src = 'imgs/game4.png';

         var img5 = new Image();

         img5.src = 'imgs/game5.png';

         var img6 = new Image();

         img6.src = 'imgs/game6.png';

         var img7 = new Image();

         img7.src = 'imgs/game7.png';

         var img8 = new Image();

         img8.src = 'imgs/game8.png';

         var img9 = new Image();

         img9.src = 'imgs/game9.png';

         var img10 = new Image();

         img10.src = 'imgs/game10.png';

         var img11 = new Image();

         img11.src = 'imgs/game11.png';

         var img12 = new Image();

         img12.src = 'imgs/game12.png';

         img(ctx,img1,0,0);

         img(ctx,img2,50,0);

         img(ctx,img3,100,0);

         img(ctx,img4,150,0);

         img(ctx,img5,200,0);

         img(ctx,img6,250,0);

         img(ctx,img7,300,0);

         img(ctx,img8,350,0);

         img(ctx,img9,0,100);

         img(ctx,img10,50,100);

         img(ctx,img11,100,100);

         img(ctx,img12,150,100);

 </script>

 </html>

/这边是自己封装了一个函数，其实从性能优化的角度来考虑，我们可以先在内存中创建一个canvas标签，将这个图画放在内存中的canvas里面，再将内存中创建好的canvas放到页面上的这个canvas标签上，这只是一个思路，希望大家可以往这方面考虑

利用canvas来绘制一个会动的图画的更多相关文章

  1. 利用canvas来绘制一个会动的图画，欢迎指教

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

  2. 利用Canvas进行绘制XY坐标系

    首先来一发图 绘制XY的坐标主要是利用Canvas setLeft和setBottom功能(Canvas内置坐标的功能) 1.首先WPF中的坐标系都是从左到右,从上到下的 即左上角位置(0,0)点,所 ...

  3. 公告栏添加时钟——利用canvas画出一个时钟

    前言 最近在学习HTML5标签,学到Canvas,觉得很有趣.便在慕课网找了个demo练手.就是Canvas时钟. 对于canvas,w3shcool上是这么描述的: HTML5 <canvas ...

  4. canvas基础绘制-一个小球的坠落、反弹

    效果如图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  5. Javascript高级编程学习笔记（87）—— Canvas(4)绘制路径

    绘制路径 2D上下文支持许多在画布上绘制路径的方法 通过路径可以创造出复杂的形状和线条,要绘制路径首先必须调用beginPath()方法,表示开始绘制路径 然后再通过下列的方法绘制路径: arc(x, ...

  6. Canvas绘制一个大鱼喂小鱼的游戏

    Canvas是HTML5中的一部分,强大的API足以让我们绘制我们任意想绘制的东西.利用Canvas的基础学习以及JavaScript面向对象的思想绘制一个小游戏,下面是源码地址https://git ...

  7. 10分钟，利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  8. 用canvas绘制一个简易时钟

    在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...

  9. Canvas 绘制一个像素风电子时钟

    想法是在 Canvas 上绘制由小方块组成的数字. 第一步是实现绘制小方块的方法,先画出一个边长为 5 的 10x10 个方块,使用两个 for 循环很简单就能完成. for (let i = 0; ...

随机推荐

  1. python之接口

    首先,我们必须明确的一点是:python里无接口类型,定义接口只是一个人为规定,在编程过程自我约束 python的类是可以写任意个方法的 定义一个接口对继承类进行约束,接口里有什么方法,继承类就必须有 ...

  2. XCache 一种快速可靠的PHP操作码缓存

    1,错误报告开启 错误报告是在PHP中一个非常有用的功能,应同时在开发阶段启用. 这可以帮助我们确定我们的代码中的问题. 最常用的功能是“E_ALL”,这有助于我们发现所有的警告和严重错误. 必须指出 ...

  3. R数据可视化手册学习简单的绘制常见的图形

    1.绘制散点图 # 使用ggplot2 library(ggplot2) ggplot(data = mtcars, aes(x = wt, y = mpg)) + geom_point() 2.绘制 ...

  4. Oracle HA 之 测试RAC的功能

    作用:在oracle数据库instance级别的冗余,其中只要有一个instance可用即可保证可用性,但是不能保准数据级别的错误. 数据库文件需要放置在共享存储上,理论上一个实例对应一个数据库,实例 ...

  5. util date 转 sql date

    JAVA 处理时间 - java.sql.Date.java.util.Date与数据库中的Date字段的转换方法,以及util包下的Date类与字符串的相互转换在java环境中使用的Date时间类通 ...

  6. JavaScript如何实现拖放功能

    1.在学习ExtJs时,对其拖放功能感到很陌生,然后找了个拖放功能实现. 转载地址 2.拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素.鼠标的移动也就是x.y坐标的变化:元素的移动就是style. ...

  7. hdu1305Immediate Decodability(字典树）

    这题看是否 这题能A是侥幸,解决的办法是先存一下输入的字符串,进行排序. Problem Description An encoding of a set of symbols is said to ...

  8. Weka——PrincipalComponents分析

    package weka.filters.unsupervised.attribute; PrincipalComponents 属性: /** The data to transform analy ...

  9. How to enable TLS 1.2 on Windows Server 2008 R2

    Problem How to enable TLS 1.2 on Windows Server 2008 R2? Resolution QuoVadis recommends enabling and ...

  10. 2018-2019-2 网络对抗技术 20165324 Exp2： 后门原理与实践

    2018-2019-2 网络对抗技术 20165324 Exp2: 后门原理与实践 课程学习: 后门 后门:是不经过正常认证流程而访问系统的通道,存在与编译器.操作系统.固件和应用中等等. 后门工作流 ...