使用canvas实现简单动画

最新推荐文章于 2025-11-01 23:33:51 发布

原创

最新推荐文章于 2025-11-01 23:33:51 发布 · 9.7k 阅读

26 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何使用HTML5的Canvas API来创建一个简单的星星运动动画。通过调用getContext()获取绘图环境，利用Canvas绘图功能让星星在画布上移动。

大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上，而是定义在通过画布的 getContext()获得的一个“绘图环境”对象上。

实现如下星星的运动

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<canvas id='canvas' width="800px" height="500px"></canvas>
	<script type="text/javascript">
		var canvas = document.getElementById('canvas');
		var c = canvas.getConte