Canvas介绍、Canvas API
Canvas介绍
Canavs是HTML5规范的一部分，需要使用 <canvas></canvas>在HTML中标注使用。实际操作的是canvas的context。
Context2D是基于状态的，拥有一个状态机，当绘制时读取状态（路径、样式等），绘制图形，因此本质上是对状态进行操作（改变状态）。
第一个canvas，Hello World
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>直线</title>
<script>
window.onload = function () {
const cnv = document.getElementById("app");
const ctx = cnv.getContext("2d");
ctx.fillText("Hello World", 100, 75);
};
</script>
</head>
<body>
<canvas id="app" width="200" height="150"></canvas>
</body>
</html>
- 获取canvas DOM元素
- 使用getContext("2d")获取绘图上下文
- 调用Context2D API绘制图形
Canvas API
画图
| API | 用途 | |
|---|---|---|
| lineTo | 画直线 | |
| rect、fillRect、strokeRect | 画矩形 | |
| arc | 画圆形 | |
| arcTo | 路径上画圆弧 | |
| ellipse | 画椭圆 | |
| fillText | 填充文字 | |
| strokeText | 描边文字 | |
| bezierCurveTo | 贝塞尔曲线 | |
| quadraticCurveTo | 三次贝塞尔曲线 | |
| drawImage | 绘制图像 |
功能
| API | 用途 | |
|---|---|---|
| save | 存储状态 | |
| restore | 恢复状态 | |
| clip | 裁剪路径 | |
| beginPath | 开始路径 | |
| closePath | 闭合路径 |
属性
| 属性 | 用途 | |
|---|---|---|
样式风格
对于fillStyle和strokeStyle（填充样式和描边样式），可以设置为颜色、图案（Pattern）、渐变
- 线性渐变
createLinearGradient - 径向渐变
createRadialGradient - 图案
createPattern
全局配置
globalAplha：设置全局透明度
globalCompositeOperation：设置全局混合模式