文本替换：
<canvas>
替换文本内容
</canvas>
图片替换：
<canvas>
<img src="images/替换图片.jpg" alt="图片不显示时的替换文本">
</canvas>
canvas 提供了三种方法绘制矩形：
- fillRect(x, y, width, height)：绘制一个填充的矩形。
- strokeRect(x, y, width, height)：绘制一个矩形的边框。
- clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。
- 参数说明：
x, y： 指的是矩形的左上角的坐标。(相对于canvas的坐标原点)
width, height：指的是绘制的矩形的宽和高。
其它：
- fillStyle=”” ：可以设置填充颜色（配合 fillRect(x, y, width, height) 使用），不设置默认是 black（黑色）
- strokeStyle = ‘color’：设置图形轮廓的颜色
- 不填充矩形的边框颜色默认是灰色
<body>
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
// 获取 DOM 对象
const canvas = document.getElementById('canvas')
// 获取 Canvas 对象
const ctx = canvas.getContext('2d')
// 设置填充颜色
ctx.fillStyle = 'red'
// 创建填充矩形
ctx.fillRect(10,10,60,60)
// 创建不填充矩形，边框颜色灰色
ctx.strokeRect(70, 70, 50, 50)
// 将指定区域变为透明
ctx.clearRect(40,40,50,50)
</script>
</body>
其它：
- lineWidth = Number：表示线宽大小
- strokeStyle = ‘color’：设置图形轮廓的颜色
- 不填充矩形的边框颜色默认是黑色
<body>
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
// 获取 DOM 对象
const canvas = document.getElementById('canvas')
// 获取 Canvas 对象
const ctx = canvas.getContext('2d')
// 表示开始绘制路径
ctx.beginPath()
// 设置线条宽度
ctx.lineWidth = 1
// 设置线条颜色
ctx.strokeStyle = 'blue';
// 起始坐标 moveTo(x, y)
ctx.moveTo(30, 30)
// 第一段线的终点坐标 lineTo(x, y)
ctx.lineTo(100, 100)
// 如果绘制的是折线，还可以继续指定从当前终点坐标作为起点到下一个终点坐标
// ctx.lineTo(180, 80)
// ……
// 如果线段数大于等于 2，而且设置 closePath()，就会闭合形成一个多边形
// ctx.closePath()
//填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。
ctx.fill();
// 只有设置 stroke() 才会生成线段
ctx.stroke()
</script>
</body>
其它：
- lineWidth = Number：表示线宽大小
- strokeStyle = ‘颜色’：设置圆边框线条颜色
- fillStyle = ‘颜色’：设置圆内部填充颜色
- 不填充矩形的边框颜色默认是黑色
<body>
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
// 获取 DOM 对象
const canvas = document.getElementById('canvas')
// 获取 Canvas 对象
const ctx = canvas.getContext('2d')
// 表示开始绘制路径
ctx.beginPath()
// 设置圆形边框线条宽度
ctx.lineWidth = 1
// 设置圆形边框线条颜色
ctx.strokeStyle = 'blue'
// 设置圆形内部填充颜色
ctx.fillStyle = 'red'
// 绘制圆形
ctx.arc(150, 75, 50, 0, 2 * Math.PI)
// 绘制圆形的边框
ctx.stroke()
// 填充圆形内部颜色，需要搭配 fillStyle 使用
ctx.fill()
</script>
</body>
canvas 提供了两种方法来渲染文本：
- fillText(text, x, y [, maxWidth]) ：在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的，文本内填充
- strokeText(text, x, y [, maxWidth]) ：在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的，文本不填充
给文本添加样式：
- font = value 当前我们用来绘制文本的样式：这个字符串使用和 CSS font 属性相同的语法，默认的字体是 10px sans-serif
- textAlign = value 文本对齐选项：可选的值包括：start、end、left、right、center，默认值是 start
- textBaseline = value 基线对齐选项：可选的值包括：top、hanging、middle、alphabetic、ideographic、bottom，默认值是 alphabetic
- direction = value 文本方向：可能的值包括：ltr、rtl、inherit，默认值是 inherit
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext("2d");
// 设置字体大小和选用字体
ctx.font = "20px sans-serif"
// 文本内填充
ctx.fillText("测试文本", 10, 10);
// 文本不填充
ctx.strokeText("测试文本", 10, 20)
lineCap = type 线条末端样式：
- butt：线段末端以方形结束
- round：线段末端以圆形结束，两端分别增加了以线宽为直径的半圆
- square：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
var lineCaps = ["butt", "round", "square"];
for (var i = 0; i < 3; i++){
ctx.beginPath();
ctx.moveTo(20 + 30 * i, 30);
ctx.lineTo(20 + 30 * i, 100);
ctx.lineWidth = 20;
ctx.lineCap = lineCaps[i];
ctx.stroke();
}
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
ctx.setLineDash([20, 5]); // [实线长度, 间隙长度]
ctx.lineDashOffset = -0;
ctx.strokeRect(50, 50, 210, 210);