如果这篇文章对你有所帮助，点个赞呗！！！
创建canvas至少需要提供width和height属性，才能通知浏览器需要多大位置画图。标签的内容是后备数据，在浏览器不支持canvas元素时显示。
<canvas id="mycanvas" width="200" height="200">haha</canvas>可以通过if(canvas.getContext)来判断浏览器是否支持canvas。
通过canvas.getContext('2d')可以获取 2D 绘图上下文。2D 绘图上下文提供了绘制 2D 图形的方法。左边原点(0, 0)在 canvas元素的左上角，x 坐标向右增长，y 坐标向下增长。
从画布上导出一张 PNG 格式的图片
<body>
<canvas id="mycanvas" width="200" height="200">haha</canvas>
<script>
const mycanvas = document.getElementById("mycanvas");
// 确保浏览器支持canvas
if (mycanvas.getContext) {
// 获得图像的数据URI
const imgURI = mycanvas.toDataURL("image/png");
console.log(imgURI);
}
</script>
</body>
我们查看控制台可以发现，输出了一串base64编码，也就是说，canvas.toDataURL就是将画布 canvas转换成base64编码。
填充与描边
- 填充就是以特定的样式填充形状，包括颜色、渐变、图像
- 描边就是只给形状边界着色。
显示效果取决于两个属性：fillStyle和strokeStyle。
const mycanvas = document.getElementById("mycanvas");
// 确保浏览器支持canvas
if (mycanvas.getContext) {
const context = mycanvas.getContext("2d");
context.fillStyle = "#000";
context.strokeStyle = "red";
}没有效果？
别急，这是因为我们只是设置了填充和描边而已，想要它生效，还需要绘制出来才能有效果。
绘制矩形
与绘制矩形相关的方法有三个。它们都接收 4 个参数：矩形 x 坐标、矩形 y 坐标、矩形宽度和矩形高度。(单位是像素，但是传参时不需要传单位)
fillRectstrokeRectclearRect
fillRect：绘制并填充矩形
fillRect：以指定颜色在画布上绘制并填充矩形，填充色使用fillStyle来设置。
const mycanvas = document.getElementById("mycanvas");
// 确保浏览器支持canvas
if (mycanvas.getContext) {
const context = mycanvas.getContext("2d");
context.fillStyle = "pink";
context.fillRect(10, 10, 50, 50);
context.fillStyle = "rgba(0, 0, 0, .1)";
context.fillRect(30, 30, 50, 50);
}
stokeRect：绘制矩形轮廓
stokeRect：绘制矩形轮廓，颜色由strokeStyle来指定。
const mycanvas = document.getElementById("mycanvas");
// 确保浏览器支持canvas
if (mycanvas.getContext) {
const context = mycanvas.getContext("2d");
context.strokeStyle = "red";
// 设置描边宽度
context.lineWidth = 5;
context.strokeRect(10, 10, 50, 50);
context.strokeStyle = "blue";
context.fillStyle = "rgba(0, 0, 0, .1)";
context.strokeRect(30, 30, 50, 50);
}
clearRect：擦除画布中某个区域
clearRect：擦除画布中某个区域，会把擦除的区域变透明。
const mycanvas = document.getElementById("mycanvas");
// 确保浏览器支持canvas
if (mycanvas.getContext) {
const context = mycanvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(0, 0, 200, 200);
context.clearRect(50, 50, 100, 100);
}
