Canvas的矩形绘制
<!--
id:标识元素的唯一性
width:画布的宽度
height:画布的高度
-->
<canvas id='myCanvas' width='800' height='800'>
</canvas>
1、fillRect
这个方法是是 Canvas 2D API 绘制填充矩形的方法
//语法说明
ctx.fillRect(x, y, width, height);
`fillRect()`方法绘制一个填充了内容的矩形，这个矩形的开始点（左上点）在`(x, y)` ，
它的宽度和高度分别由`width` 和 `height` 确定
//1、第一步获取画布
const myCanvas=document.getElementById("myCanvas")
//2、获取画笔(上下文对象)
const ctx=myCanvas.getContext("2d")
ctx.fillStyle='#256'//方式描述颜色和样式的属性（填充的颜色）
//3、绘制矩形
ctx.fillRect(200,0,100,300)
/*
参数说明:
第一个参数到左边的距离(left/x)
第二个参数到顶部的距离(top/y)
第三个参数填充矩形的宽(width)
第四个参数填充矩形的高(height)
*/
结果
2、clearRect
这个方法通过把像素设置为透明以达到擦除一个矩形区域的目的
<canvas id="myCanvas" width="800" height="800"></canvas>
// 1、获取画布
const myCanvas=document.getElementById('myCanvas')
// 2、获取上下文对象(画笔)
const ctx=myCanvas.getContext('2d')
ctx.fillStyle='#DC143C'//方式描述颜色和样式的属性（填充的颜色）
// 3、画矩形
ctx.fillRect(0,0,200,200)
// 4、要清除的矩形
ctx.clearRect(50,50,100,100)
/*
参数说明:
第一个参数到左边的距离(left/x)
第二个参数到顶部的距离(top/y)
第三个参数清除的矩形的宽(width)
第四个参数清除的矩形的高(height)
*/
结果
3、strokeRect
这个方法描绘一个起点在 (x, y) 、宽度为 w、高度为 h 的矩形的方法
<canvas id="myCanvas" width="800" height="800"></canvas>
// 1、获取画布
const myCanvas=document.getElementById('myCanvas')
// 2、获取上下文对象(画笔)
const ctx=myCanvas.getContext('2d')
ctx.strokeStyle='#DC143C'//更改形状的轮廓线颜色(笔触的颜色、渐变或模式)
// 3、画矩形
ctx.strokeRect(10,20,200,200)
/*
参数说明:
第一个参数到左边的距离(left/x)
第二个参数到顶部的距离(top/y)
第三个参数矩形的宽(width)
第四个参数矩形的高(height)
*/
结果
