HTML5 Canvas学习笔记
简介
HTML5 Canvas 是一种用于在网页上绘制图形的标准。该技术使得开发者可以使用 JavaScript 绘制图形、动画、游戏等各种互动效果，而无需依赖其他插件。
在 HTML5 Canvas 中，我们可以通过 JavaScript 操作 2D 或 3D 图形上下文，绘制直线、圆形、文本等各种图形，并且可以对其进行变换、动画等操作。下面将介绍一些常见的绘图方式以及示例代码。
常见绘图方式
绘制直线
在 HTML5 Canvas 中，可以通过以下代码绘制一条简单的直线：
javascriptCopy Codeconst canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.moveTo(0, 0)
ctx.lineTo(200, 200)
ctx.stroke()
上述代码中，首先获取了一个 canvas 元素，并获取了该元素的 2D 上下文 ctx。接着使用 beginPath 方法开始一个路径，使用 moveTo 方法设置起点坐标，使用 lineTo 方法设置终点坐标，最后使用 stroke 方法渲染路径并绘制出直线。
绘制圆形
在 HTML5 Canvas 中，可以通过以下代码绘制一个简单的圆形：
javascriptCopy Codeconst canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.arc(100, 100, 50, 0, 2 * Math.PI)
ctx.stroke()
上述代码中，同样是获取 canvas 元素和 2D 上下文 ctx。接着使用 beginPath 方法开始一个路径，使用 arc 方法绘制圆形，其中第一个参数为圆心的 x 坐标，第二个参数为圆心的 y 坐标，第三个参数为圆的半径，第四个参数为起始角度，第五个参数为终止角度，最后使用 stroke 方法渲染路径并绘制出圆形。
绘制文本
在 HTML5 Canvas 中，可以通过以下代码绘制一段简单的文本：
javascriptCopy Codeconst canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.font = '30px Arial'
ctx.strokeText('Hello World', 50, 50)
上述代码中，同样是获取 canvas 元素和 2D 上下文 ctx。接着使用 font 属性设置文本的字体大小和字体类型，使用 strokeText 方法绘制文本，其中第一个参数为要绘制的文本，第二个参数为文本的 x 坐标，第三个参数为文本的 y 坐标，最后使用 stroke 方法渲染路径并绘制出文本。
示例代码
以下是一个简单的 HTML5 Canvas 示例代码，实现了一个简单的动画效果：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Demo</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
let x = 0
let y = 0
let dx = 5
let dy = 5
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.beginPath()
ctx.arc(x, y, 50, 0, 2 * Math.PI)
ctx.stroke()
x += dx
y += dy
if (x < 50 || x > canvas.width - 50) {
dx = -dx
}
if (y < 50 || y > canvas.height - 50) {
dy = -dy
}
requestAnimationFrame(draw)
}
draw()
</script>
</body>
</html>
上述代码中，使用 canvas 元素创建了一个宽高均为 400 像素的画布，并获取了该元素的 2D 上下文。接着定义了一些变量来控制圆形的位置和运动方向，并在 draw 函数中不断更新圆形的位置并重新绘制出来，同时判断边界条件来改变圆形的运动方向。最后使用 requestAnimationFrame 方法实现了一个简单的动画效果。