大家好，我是Java1234_小锋老师，最近更新 《一天学会 HTML5 视频教程(无废话版) 》专辑，感谢大家支持。
本课程主要介绍和讲解 HTML5简介，文档结构，文本与排版标签，链接与图片，列表标签，表格标签，表单基础以及增强，容器与页面结构基础，语义化标签，音频与视频，Canvas 基础以及动画入门，SVG 基础，Web Storage 本地存储 ，文件 API，拖放 API，地理定位 API，Web Workers 入门。
视频教程+课件+源码 打包下载 ：
链接：https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd=1234
提取码：1234
HTML5（在第二阶段目录里）
HTML5 Canvas 基础以及动画入门
HTML5 Canvas 是一个用 JavaScript 绘制图形的位图画布。它适合做动画、游戏、图表、图像处理等。核心思想是：Canvas 是"立即模式"，画上去就变成像素，不保留图形对象；做动画时，每一帧都要清空并重绘。
1. 基本使用
hmtl
<canvas id="cv" width="600" height="400"></canvas>
<script>
const canvas = document.getElementById('cv');
const ctx = canvas.getContext('2d'); // 获取 2D 绘图上下文
</script>坐标系：
- 原点
(0,0)在左上角 - x 向右增大，y 向下增大
- 单位是像素
canvas.width / height是画布缓冲区尺寸，CSS 的width/height是显示尺寸，最好保持一致或处理高清屏。
2. 常用绘制 API
html
// 矩形
ctx.fillStyle = 'skyblue'; // 设置填充颜色
ctx.fillRect(50, 50, 100, 80); // 绘制矩形
ctx.strokeStyle = 'red'; // 设置边框颜色
ctx.lineWidth = 3; // 设置边框宽度
ctx.strokeRect(200, 50, 100, 80); // 绘制矩形
// 路径：三角形
ctx.beginPath(); // 开始绘制路径
ctx.moveTo(350, 50); // 移动到起点
ctx.lineTo(450, 100); // 绘制直线
ctx.lineTo(400, 180); // 绘制直线
ctx.closePath(); // 闭合路径
ctx.fillStyle = 'orange'; // 设置填充颜色
ctx.fill(); // 填充路径
ctx.stroke(); // 描边路径
// 圆
ctx.beginPath(); // 开始绘制路径
ctx.arc(150, 250, 40, 0, Math.PI * 2); // 绘制圆
ctx.fillStyle = '#3498db'; // 设置填充颜色
ctx.fill(); // 填充路径
// 文本
ctx.font = '20px sans-serif'; // 设置字体
ctx.fillStyle = '#333'; // 设置填充颜色
ctx.fillText('Hello Canvas', 300, 250); // 绘制文本常用状态：
fillStyle：填充色/渐变strokeStyle：描边色lineWidth：线宽globalAlpha：透明度save()/restore()：保存和恢复状态，适合配合translate、rotate、scale
3. 动画核心：requestAnimationFrame
动画三步：
- 清空画布：
ctx.clearRect(0, 0, canvas.width, canvas.height) - 更新数据：位置、速度、角度等
- 重新绘制
- 用
requestAnimationFrame请求下一帧
不要用 setInterval 做动画，requestAnimationFrame 会跟随浏览器刷新率，通常约 60 FPS，后台标签页还会自动暂停。
4. 完整示例：弹跳小球
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Canvas 动画入门</title>
<style>
canvas {
display: block; /* 设置为块级元素 */
margin: 20px auto; /* 设置外边距 */
border: 1px solid #ccc; /* 设置边框 */
background: #f7f7f7; /* 设置背景颜色 */
}
</style>
</head>
<body>
<canvas id="cv" width="600" height="400"></canvas> <!-- 创建 canvas 元素 -->
<script>
const canvas = document.getElementById('cv'); // 获取 canvas 元素
const ctx = canvas.getContext('2d'); // 获取 2D 绘图上下文
let x = 100; // 小球 x 坐标
let y = 100; // 小球 y 坐标
let vx = 180; // 像素/秒
let vy = 120; // 小球 y 速度
let r = 20; // 小球半径
let lastTime = 0; // 上次更新时间
function update(dt) { // 更新小球
x += vx * dt; // 更新小球 x 坐标
y += vy * dt; // 更新小球 y 坐标
// 左右边界反弹
if (x - r < 0) { // 小球左边界
x = r; // 小球 x 坐标
vx = Math.abs(vx); // 小球 x 速度
} else if (x + r > canvas.width) { // 小球右边界
x = canvas.width - r; // 小球 x 坐标
vx = -Math.abs(vx); // 小球 x 速度
}
// 上下边界反弹
if (y - r < 0) { // 小球上边界
y = r; // 小球 y 坐标
vy = Math.abs(vy); // 小球 y 速度
} else if (y + r > canvas.height) { // 小球下边界
y = canvas.height - r; // 小球 y 坐标
vy = -Math.abs(vy); // 小球 y 速度
}
}
function draw() { // 绘制小球
// 1. 清空
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
// 2. 绘制小球
ctx.beginPath(); // 开始绘制路径
ctx.arc(x, y, r, 0, Math.PI * 2); // 绘制圆
ctx.fillStyle = '#3498db'; // 设置填充颜色
ctx.fill(); // 填充路径
ctx.lineWidth = 3; // 设置边框宽度
ctx.strokeStyle = '#1c6ea4'; // 设置边框颜色
ctx.stroke(); // 描边路径
}
function loop(now) { // 循环
if (!lastTime) lastTime = now; // 上次更新时间
// 秒为单位的时间差，限制最大 dt 防止切后台后跳变
const dt = Math.min((now - lastTime) / 1000, 0.05); // 时间差 限制最大 dt 防止切后台后跳变
lastTime = now; // 上次更新时间
update(dt); // 更新小球
draw(); // 绘制小球
requestAnimationFrame(loop); // 请求动画帧
}
requestAnimationFrame(loop); // 请求动画帧
</script>
</body>
</html>