canvas之实现控制动画

builder2991

已于 2023-06-26 17:20:27 修改

阅读量1.2k

点赞数 4

分类专栏： html5 文章标签： canvas 动画

于 2019-07-26 20:25:50 首次发布

本文链接：https://blog.csdn.net/low666/article/details/97414233

版权

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

canvas之实现控制动画

效果图

在这里插入图片描述

简单的思路分析

首先写出使用画布的基础代码，再分析实现操作动画的需求。

确定画布的大小，选定图片的路径
确定操纵动画时的行走步数
加载图片，设置大小
确定图片的起点，以及默认动画的朝向
确定通过方向键动画的走动方向
绘制动画，对精灵图进行定位，每次完成一次动画都要对画布进行清空。

详细代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>canvas</title>
		<style>
			canvas{
				border:1px solid #ccc;
			}
		</style>
	</head>
	<body>
		<canvas width="600" height="400"></canvas>
		<script>
			  var Person = function (ctx) {
		        /*绘制工具*/
		        this.ctx = ctx || document.querySelector('canvas').getContext('2d');
		        /*图片路径*/
		        this.src = 'image/04.png';
		        /*画布的大小*/
		        this.canvasWidth = this.ctx.canvas.width;
		        this.canvasHeight = this.ctx.canvas.height;
		        /*行走相关参数*/
		        this.stepSzie = 10;
		        /* 0 前  1 左  2 右  3 后  和图片的行数包含的图片对应上*/
		        this.direction = 0;
		        /*x轴方向的偏移步数*/
		        this.stepX = 0;
		        /*y轴方向的偏移步数*/
		        this.stepY = 0;
		        /*初始化方法*/
		        this.init();
		    };
			 Person.prototype.init = function () {
			        var that = this;
			        /*1.加载图片*/
			        this.loadImage(function (image) {
			            /*图片的大小*/
			            that.imageWidth = image.width;
			            that.imageHeight = image.height;
			            /*人物的大小*/
			            that.personWidth = that.imageWidth / 4;
			            that.personHeight = that.imageHeight / 4;
			            /*绘制图片的起点*/
			            that.x0 = that.canvasWidth / 2 - that.personWidth / 2;
			            that.y0 = that.canvasHeight / 2 - that.personHeight / 2;
			            /*2.默认绘制在中心位置正面朝外*/
			            that.ctx.drawImage(image,
			                0,0,
			                that.personWidth,that.personHeight,
			                that.x0,that.y0,
			                that.personWidth,that.personHeight);
			            /*3.能通过方向键去控制人物行走*/
			            that.index = 0;
			            document.onkeydown = function (e) {
			                if(e.keyCode == 40){
			                    that.direction = 0;
			                    that.stepY ++;
			                    that.drawImage(image);
			                    /*前*/
			                }else if(e.keyCode == 37){
			                    that.direction = 1;
			                    that.stepX --;
			                    that.drawImage(image);
			                    /*左*/
			                }else if(e.keyCode == 39){
			                    that.direction = 2;
			                    that.stepX ++;
			                    that.drawImage(image);
			                    /*右*/
			                }else if(e.keyCode == 38){
			                    that.direction = 3;
			                    that.stepY --;
			                    that.drawImage(image);
			                    /*后*/
			                }
			            }
			        });
			    }
			  /*加载图片*/
		    Person.prototype.loadImage = function (callback) {
		        var image = new Image();
		        image.onload = function () {
		            callback && callback(image);
		        };
		        image.src = this.src;
		    };
		    /*绘制图片*/
		    Person.prototype.drawImage = function (image) {
		        this.index ++;
		        /*清除画布*/
		        this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight);
		        /*绘图*/
		        /*在精灵图上的定位 x  索引*/
		        /*在精灵图上的定位 y  方向*/
		        this.ctx.drawImage(image,
		            this.index * this.personWidth,this.direction * this.personHeight,
		            this.personWidth,this.personHeight,
		            this.x0 + this.stepX * this.stepSzie ,this.y0 + this.stepY * this.stepSzie,
		            this.personWidth,this.personHeight);
		        /*如果索引超出了 变成0*/
		        if(this.index >= 3){
		            this.index = 0;
		        }
		    };
		    new Person();
		</script>	
	</body>
</html>

builder2991

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
canvas之实现控制动画

canvas之实现控制动画效果图简单的思路分析首先写出使用画布的基础代码，再分析实现操作动画的需求。确定画布的大小，选定图片的路径确定操纵动画时的行走步数加载图片，设置大小确定图片的起点，以及默认动画的朝向确定通过方向键动画的走动方向绘制动画，对精灵图进行定位，每次完成一次动画都要对画布进行清空。详细代码<!DOCTYPE html><html&gt...
复制链接

扫一扫

专栏目录