示例1 绘制简单图形
<!-- 默认宽高：300x150 -->
<canvas id="canvas"
width="300"
height="150"></canvas>
<script>
// 获取画布对象
let canvas = document.querySelector('#canvas');
// 获取 CanvasRenderingContext2D 上下文对象(画笔)
let ctx = canvas.getContext('2d');
console.log(ctx);
// 绘制路径
ctx.rect(50, 50, 50, 50);
// 填充
ctx.fillStyle = "green";
ctx.fill();
// 描边
ctx.lineWidth = 20
ctx.strokeStyle = 'red'
ctx.stroke()
</script>
示例2：绘制图形和文本
<canvas id="canvas"></canvas>
<script>
// 获取上下文
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
console.log(ctx);
/* 设置线条属性 */
ctx.lineWidth = 10; // 线条宽度
ctx.lineCap = 'round'; // 端点样式 butt|round|square
ctx.lineJoin = "round"; // 拐角样式 bevel|round|miter
ctx.fillStyle = "green"; // 填充颜色
ctx.strokeStyle = "red" // 画笔颜色
/* 绘制三角形 */
ctx.beginPath();
ctx.moveTo(10, 10); // 设置起始点
ctx.lineTo(10, 50);
ctx.lineTo(50, 50);
ctx.closePath() // 关闭路径，避免连笔
ctx.stroke(); // 绘制路径
ctx.fill(); // 填充
/* 绘制矩形 */
ctx.beginPath();
ctx.moveTo(70, 10);
ctx.lineTo(70, 50);
ctx.lineTo(110, 50);
ctx.lineTo(110, 10);
ctx.closePath()
ctx.stroke();
ctx.fill();
/* 绘制圆形 */
ctx.beginPath();
// （圆心x, 圆心y, 半径, 起始角[弧度计], 结束角[弧度计], false顺时针/true逆时针)
ctx.arc(150, 30, 20, 0, 2 * Math.PI, false);
ctx.closePath()
ctx.stroke();
ctx.fill();
/* 绘制文本 */
ctx.font = '40px 微软雅黑' // 字体属性
ctx.lineWidth = 1; // 线条宽度
ctx.shadowBlur = 20; // 阴影模糊级别
ctx.shadowColor="black"; // 阴影颜色
ctx.shadowOffsetX = 10; // 阴影水平距离
ctx.shadowOffsetY = 20; // 阴影垂直距离
ctx.fillText('Hello', 10, 100); // 绘制填充文本
ctx.strokeText('Hello', 130, 100); // 绘制镂空文本
</script>
