绘制矩形的其它方法

let oCanvas = document.querySelector("canvas");
let oCtx = oCanvas.getContext("2d");

oCtx.moveTo(100, 100);
oCtx.lineTo(300, 100);
oCtx.lineWidth = 200;  // 充当矩形的高度
oCtx.stroke();

// 左上角坐标x，左上角坐标y，矩形宽度，矩形高度
oCtx.rect(100, 100, 200, 200);  
// oCtx.stroke();
oCtx.fill();

oCtx.rect(100, 100, 200, 200);  
oCtx.stroke();

oCtx.beginPath();
oCtx.rect(150, 150, 100, 100);  
oCtx.strokeStyle = "blue";
oCtx.stroke();

oCtx.strokeRect(100, 100, 200, 200);

// 这个方法自动开启新路径
oCtx.strokeStyle = "blue";
oCtx.strokeRect(150, 150, 100, 100);

oCtx.fillRect(100, 100, 200, 200);

// 这个方法自动开启新路径
oCtx.fillStyle = "blue";
oCtx.fillRect(150, 150, 100, 100);

清空矩形区域

oCtx.clearRect(0, 0, 150, 150);

// 清屏操作
let canvasWidth = oCtx.canvas.width;
let canvasHeight = oCtx.canvas.height;
oCtx.clearRect(0, 0, canvasWidth, canvasHeight);

渐变方案

// 线性渐变
// (x0, y0, x1, y1)获得一条(x0,y0)指向(x1,y1)的向量，用于确定渐变方向和渐变宽度
let linearGradient = oCtx.createLinearGradient(); 
// 
linearGradient.addColorStop(0, "green");  // 0%的时候是绿色
linearGradient.addColorStop(1, "green");  // 100%的时候是蓝色

// 径向渐变 
oCtx.createRadialGradient();