<!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. 我理解的Future模式

    学而时习之,不亦说乎!                              --<论语> 什么是Future? 考虑一个场景,为了完成某个业务,我需要同时查询三张表的三条独立数据.但 ...

  2. genkins的报错排查

    [ERROR] /root/.jenkins/workspace/car/src/main/java/com/zhengxin/tool/code/Code.java:[20,64] diamond ...

  3. CAN2.0A帧格式 与 LIN帧格式 简单说明

    一.标准的2.0A帧格式 各字段解释:SOF帧开始标志比特是一个显性比特(0),由一个或多个准备发送帧的节点传输.SOF标志着帧的开始(或仲裁发送帧的权利),并用于“硬同步”总线上的设备.只有在开始发 ...

  4. iOS开发苹果内购的介绍与实现

    1.iOS开发苹果内购的介绍 1.1 介绍 苹果规定,凡是虚拟的物品(例如:QQ音乐的乐币)进行交易时,都必须走苹果的内购通道,苹果要收取大约30%的抽成,所以不允许接入第三方的支付方式(微信.支付宝 ...

  5. Java生成树关系的菜单

    1.菜单bean public class Menu { private String id; private String menuname; private String parentid; pr ...

  6. MySQL插入记录 insert

    一.insert insert tb_name [(col_name,......)] {values | value} ({expr | default } ....... ) , ( ... ) ...

  7. mac 下安装 mit-scheme

    这两天心血来潮想看一下 SICP 和 Lisp,准备先看 SICP ,之后再学 Haskell, 深入学习一下函数式编程. 所以得装个 mit-scheme 做练习. 尝试了 3 种方式, 前 2 种 ...

  8. JVM的内存分配和回收策略

    对象的Class加载 虚拟机遇到一条new指令时,首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已被加载.解析和初始化过.如果没有,那必须先执行相应 ...

  9. 针对浏览器不支持JavaScript的简单处理

    简单的思路是这样的: 在网页中显示某些内容,作为不支持JS的提示, 然后在页面载人的时候执行一段JS代码,代码的功能就是隐藏那个提示不支持JS的代码 具体内容看例子: <html> < ...

  10. git submodule的使用

    1.在项目中使用Submodule 为当前工程添加submodule,命令如下:git submodule add 仓库地址 路径仓库地址:是指子模块仓库地址URL.路径:指将子模块放置在当前工程下的 ...