[TOC] ## 绘制矩形 1. `fillRect(x, y, width, height)`：绘制一个填充的矩形。 2. `strokeRect(x, y, width, height)`：绘制一个矩形的边框。 3. `clearRect(x, y, widh, height)`：清除指定的矩形区域，然后这块区域会变的完全透明。 ## 实例 ``` var draw=()=>{ let canvas = document.querySelector("#tutorial"); if(!canvas.getContext)return; /** * @type CanvasRenderingContext2D */ let ctx = canvas.getContext("2d"); // style 必须写在前面 ctx.fillStyle="rgb(200,0,0)" ctx.fillRect(10,10,100,100) ctx.strokeStyle="rgb(0,100,0)" ctx.strokeRect(10,10,100,100) ctx.clearRect(20,20,50,50) } ```