本文介绍了Canvas动画实战，包括搭建页面、具体实现流星动画的步骤，以及性能优化策略，如使用计算代替频繁渲染、requestAnimationFrame、离屏渲染和分层画布技术。文章强调了算法在Canvas动画中的重要性，并预告了后续关于WebGL的内容。
插播一篇关于 canvas 动画及性能优化的文章，为我们可以更好的进入到 webgl 的世界奠定基础。
本篇文章的内容可能会稍难理解，还希望大家有问题及时提出。闲话我们就不多说了，开始今天的正题吧。
1. 动画实战
首先介绍一下我们要实现的动画内容： 夜空中的流星源码。
今天就来跟大家详细分享一下如何进行编写 canvas 动画以及如何进行优化。
1.1 搭建页面
canvas的页面组成是非常简单的。如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas动画和性能优化实战</title>
<!-- 引入页面的样式 -->
<link rel="stylesheet" href="./style/index.css">
</head>
<body>
<canvas id="shooting-star">您的浏览器不支持canvas标签，请升级版本或选择其他浏览器</canvas>
</body>
</html>
<!-- 引入页面的功能 -->
<script src="./js/index.js"></script>
创建一个 html 文件，并且引入 css 和 js 文件。
这里有一个问题，之前我们跟大家分享的时候说，canvas标签的宽和高要在html中进行设置。但是为了适配我们的屏幕，就得用js来设置画布的宽和高。
1.2 具体实现
1. 首先创建一个流星的类。并添加一个启动的方法
class ShootingStar{
// 构造方法
constructor() {
}
// 启动的方法
start(
最低0.47元/天 解锁文章
扫一扫
616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
