Canvas - 帧动画

最新推荐文章于 2024-07-21 02:40:53 发布

TrumanGao

最新推荐文章于 2024-07-21 02:40:53 发布

阅读量568

点赞数

文章标签： canvas javascript html5

本文链接：https://blog.csdn.net/TrumanGao/article/details/105411388

版权

本文介绍了如何利用HTML5的Canvas和JavaScript实现帧动画。关键在于`ctx.drawImage()`方法和`setInterval`定时器的结合使用，通过调整图片的显示位置来实现动画效果。文章提供了一个简单的开始、结束、暂停和继续动画的交互界面。

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

目标：用 Canvas 实现帧动画

先看页面效果。下面四个按钮分别表示
开始、结束、暂停、继续在这里插入图片描述
下面是帧动画图片素材：
帧动画素材图
该功能的实现，关键点是 ctx.drawImage() 方法（9个参数）和 setInterval 定时器。
设置该图片的视图窗口，每次执行定时任务位移展示下一帧动画即可。

直接上代码

（实现逻辑见代码注释；图片路径自定义）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>帧动画</title>
	</head>
	<body>
		<canvas id="canvas" width="400" height="300"></canvas>
		<div class="">
			<button class="start-btn" type="button">重新吃</button>
			<button class