使用canvas完成帧动画（方向键控制行走的小人）

最新推荐文章于 2022-01-10 12:51:20 发布

codingWeb

最新推荐文章于 2022-01-10 12:51:20 发布

阅读量723

点赞数

本文链接：https://blog.csdn.net/fesfsefgs/article/details/99695694

版权

本文介绍如何利用HTML5 Canvas创建帧动画，并通过监听键盘事件来控制一个小人在画布上行走。通过分解静态图像序列，实现平滑的角色移动效果。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			canvas{
			border: 1px solid black;
			background: black;
			}
		</style>
	</head>
	<body>
		<canvas id="" width="600" height="400"></canvas>
	</body>
	<script type="text/javascript">
		 var canvas=document.querySelector("canvas")
		 var tools=canvas.getContext("2d")
	     
	     var Person=function(ctx){
	     	//绘制工具
	     	this.ctx=ctx || document.querySelector("canvas").getContext("2d")
	     	//图片路径
	     	this.src="img/monster.png"
	     	//画布的大小
	     	this.canvasWidth=this.ctx.canvas.width
	     	this.canvasHeight=this.ctx.canvas.height
	     	
	     	/*行走相关参数*/
	     	this.stepSize=10
	     	//0：前   1：左

最低0.47元/天解锁文章

codingWeb

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用canvas完成帧动画（方向键控制行走的小人）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> canvas{ border: 1px solid black; background: blac...
复制链接

扫一扫