canvas动画制作

最新推荐文章于 2024-05-28 09:34:39 发布

你是八月的光亮

最新推荐文章于 2024-05-28 09:34:39 发布

阅读量720

点赞数 1

本文链接：https://blog.csdn.net/kun_moon/article/details/100672004

版权

本文介绍了如何使用canvas进行动画制作，重点讲解了drawImage()方法的三种用法，包括图片绘制、缩放和截取。同时，还讨论了坐标变换技术，如平移、缩放和旋转，这些是实现canvas动画的关键操作。

摘要由CSDN通过智能技术生成

绘制图片

drawImage()
- 三个参数drawImage(img,x,y)
  - img 图片对象、canvas对象、video对象
  - x,y 图片绘制的左上角
- 五个参数drawImage(img,x,y,w,h)
  - img 图片对象、canvas对象、video对象
  - x,y 图片绘制的左上角
  - w,h 图片绘制尺寸设置(图片缩放，不是截取)
- 九个参数drawImage(img,x,y,w,h,x1,y1,w1,h1)
  - img 图片对象、canvas对象、video对象
  - x,y,w,h 图片中的一个矩形区域
  - x1,y1,w1,h1 画布中的一个矩形区域

坐标变换

平移移动画布的原点
- translate(x,y) 参数表示移动目标点的坐标
缩放
- scale(x,y) 参数表示宽高的缩放比例
旋转
- rotate(angle) 参数表示旋转角度

案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>lmy</title>
</head>
<body>
<canvas width="600" height="400" style="border: 1px solid #ccc"></canvas>	

<script type="text/javascript">
function Person(){
	this.ctx=document.querySelector('canvas').getContext('2d');
	this.src="03.png";
	this.w=this.ctx.canvas.width;
	this.h=this.ctx.canvas.height;
	this.stepSize=10;
	this.stepX=0;
	this.stepY=0;
	this.index=0;
	this.derection=0;
}
Person.prototype.init=function(){
	this.loadImage()
}

Person.prototype.loadImage=function(){
	var image=new Image();
	image.onload=function(){
		this.imageW=image.width;
		this.imageH=image.height;
		//人物
		this.personW=this.imageW/4;
		this.personH=this.imageH/4;
		//起点
		this.x0=this.w/2-this.personW/2;
		this.y0=this.h/2-this.personH/2;
		//绘制
		this.ctx.drawImage(image,0,0,this.personW,this.personH,this.x0,this.y0,this.personW,this.personH);

		this.move(image);
	}.bind(this)
	image.src=this.src;
}
//方向键
Person.prototype.move=function(image){
	document.onkeydown=function(e){
		switch(e.keyCode){
			case 37:
				this.derection=1;
				this.stepX--;
				if(this.stepX<=-28){
					this.stepX=-28;
					console.log(this.stepY)
				}
				this.drawImage(image)
				break;
			case 38:
				this.derection=3;
				this.stepY--;
				if(this.stepY<=-17){
					this.stepY=-17;
					console.log(this.stepY)
				}
				this.drawImage(image)
				break;
			case 39:
				this.derection=2;
				this.stepX++;
				if(this.stepX>=+28){
					this.stepX=28;
					console.log(this.stepY)
				}
				this.drawImage(image)
				break;
			case 40:
				this.derection=0;
				this.stepY++;
				if(this.stepY>=17){
					this.stepY=17;
					console.log(this.stepY)
				}
				this.drawImage(image)
				break;
		}
	}.bind(this)
}

Person.prototype.drawImage=function(image){
	this.index++;
	this.ctx.clearRect(0,0,this.w,this.h)
	this.ctx.drawImage(image,
		this.index*this.personW,this.derection*this.personH,
		this.personW,this.personH,
		this.x0+this.stepX*this.stepSize,this.y0+this.stepY*this.stepSize,
		this.personW,this.personH
		)
	if(this.index>=3){
		this.index=-1;
	}
}



var person=new Person();
person.init();

</script>
</body>
</html>

你是八月的光亮

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas动画制作

绘制图片drawImage()三个参数drawImage(img,x,y)img 图片对象、canvas对象、video对象x,y 图片绘制的左上角五个参数drawImage(img,x,y,w,h)img 图片对象、canvas对象、video对象x,y 图片绘制的左上角w,h 图片绘制尺寸设置(图片缩放，不是截取)九个参数drawImage(img,x,y,w...
复制链接

扫一扫