<!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. Swift - 判断应用是否是第一次启动（或当前版本是否第一次启动）

    1 实现原理 (1)我们会发现许多 App 在一次启动时会显示一个新手引导页(下次启动就不会再显示)   (2)其判断原理就是在 AppDelegate 里的 didFinishLaunchingWi ...

  2. 8.21 js

    2018-8-21 20:05:43 2018-8-21 20:56:30 明天再看!!!! 今天空闲多看了书 <百年孤独> <苏东坡传> 打印结果  shanghai js的 ...

  3. eclipse快速向下复制行

    Ctrl+Alt+↓ 复制当前行到下一行(复制增加)

  4. HDU - 5818 Joint Stacks 比较大の模拟，stack，erase

    https://vjudge.net/problem/HDU-5818 题意:给你两个栈AB,有常规push,pop操作,以及一个merge操作,merge A B 即将A.B的元素按照入栈顺序全部出 ...

  5. SSL/TLS 握手优化详解

    随着 HTTP/2 的逐渐普及,以及国内网络环境越来越糟糕(运营商劫持和篡改),HTTPS 已经开始成为主流.HTTPS 在 TCP 和 HTTP 之间增加了 TLS(Transport Layer ...

  6. Ubuntu 14.04 配置 LAMP+phpMyAdmin PHP开发环境！

             先安装 Apache Web服务器,终端:sudo apt-get install apache2  apache2-doc,然后测试是否安装成功.浏览器地址栏输入:http://l ...

  7. Integral transform 积分变换

    总结: 1.为了更加便于求解,将方程从原域映射到另外一个域 Integral transform - Wikipedia https://en.wikipedia.org/wiki/Integral_ ...

  8. Nginx日志切割之Logrotate篇

    不管是什么日志文件,都是会越来越大的,大到一定程度就是个可怕的事情了,所以要及早的做处理,方法之一就是按时间段来存储,不过linux系统提供了Logrotate的日志管理工具,很好用,不用写计划任务脚 ...

  9. JS "eval智能" 工厂模式

    <script> var Shop = function () { this.name = function () { document.write("商店的名字 <br/ ...

  10. elasticsearch的重启

    没有重启的操作,只有关闭了再启动的操作. ps -ef | grep elastic e表示全部的进程,f表示展示进程间的相关关系,如父子进程. 然后找到你启动es的那个账号,不是root,一般是新建 ...