首先通过HTML创建canvas元素并用JavaScript获取其2D渲染上下文，接着利用ctx的方法绘制图形：先设置fillStyle为blue并调用fillRect绘制填充矩形，再设置strokeStyle为red和lineWidth为3后调用strokeRect绘制边框矩形。
使用JavaScript操作Canvas绘制图形，核心在于获取到HTML中的
元素，然后通过它拿到2D渲染上下文（getContext('2d')）。一旦你有了这个上下文，它就像你手中的画笔和颜料盘，各种绘制方法就任你调遣了，从简单的线条、矩形到复杂的路径、文字乃至图片，都能在你的“画布”上生动呈现。这过程，说白了，就是通过代码指令，一步步构建你的视觉世界。
要开始在Canvas上挥洒创意，我们得先搭好舞台。首先，HTML里得有个
标签，给它一个ID，方便JavaScript找到它。
接着，就是JavaScript的部分了。
const canvas = document.getElementById('myCanvas');
// 检查浏览器是否支持Canvas，这是个好习惯
if (canvas.getContext) {
const ctx = canvas.getContext('2d'); // 获取2D渲染上下文
// 我个人觉得，最直观的绘制就是矩形了。
// 绘制一个填充矩形：(x, y, width, height)
ctx.fillStyle = 'blue'; // 设置填充颜色
ctx.fillRect(50, 50, 100, 75); // 从(50,50)开始，宽100，高75
// 绘制一个边框矩形
ctx.strokeStyle = 'red'; // 设置边框颜色
ctx.lineWidth = 3; // 设置线宽
ctx.strokeRect(180, 50, 100, 75);
// 清除矩形区域
// ctx.clearRect(0, 0, canvas.width, canvas.height 
