zoukankan      html  css  js  c++  java
  • js+ canvas 实现人物走动

    在网上看了一篇管道工玛利亚走动的图片,感觉人物走动的太生涩了,就写了一下代码改动一下:

    js 代码:

    //定义数组图片集合
    			var marios = new Array("image/QQ截图20141119164825.png", "image/QQ截图20141119164845.png", "image/QQ截图20141119164908.png");
    			var mario = new Image();
    			var canvas;
    			var ctx;
    			var i = -1;
    			var num = 0;
    
    			function init() {
    				//alert("----------")
    				setInterval("draw()", 200);
    			}
    
    			function draw() {
    				i++;
    				//alert(i)
    				mario.src = marios[i];
    				//alert(mario)
    				canvas = document.getElementById("mycanvas");
    				ctx = canvas.getContext("2d");
    				ctx.clearRect(0, 0, 400, 100) 
    				ctx.drawImage(mario, num, 0);
    				num += 10;
    				if (num == 400) {
    					num = 0;
    				}
    				if (i == 2) {
    					i = -1;
    				}
    			}
    html代码:

    <body onload="init()">
    		<canvas id="mycanvas" width="400" height="100" style="border: 1px solid #888888;"></canvas>
    	</body>
    图片:

                

  • 相关阅读:
    AD20改变pcb图纸大小方式
    ceph相关概念
    五种IO模型和三种实现方式
    MongoDB入门
    GO通过sqlx库操作MySQL
    Go原生sql操作MySQL
    Traefik工作原理
    Redis主从
    Nginx入门
    Redis入门
  • 原文地址:https://www.cnblogs.com/yutingliuyl/p/7087105.html
Copyright © 2011-2022 走看看