效果
画一个填充矩形
ctx.fillRect(x,y,width,height)
画一个描边矩形
ctx.strokeRect(x,y,width,height)
清除指定矩形区域
ctx.clearRect(x,y,width,height)
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#test {
box-shadow: 0 0 10px #333;
}
</style>
</head>
<body>
<canvas id="test" width="500" height="400"></canvas>
<script>
//画布
let canvas = document.getElementById('test');
// 画笔
let ctx = canvas.getContext('2d');
//1、 画一个红色的填充矩形 fillRect(x,y,width,height)
ctx.fillStyle = 'red'
ctx.fillRect(0,0,350,300);
//2、 画一个半透明填充矩形
ctx.fillStyle = 'rgba(0,0,200,0.5)';
ctx.fillRect(30,30,350,300);
//3、 画一个蓝色的描边矩形（相当于border) storkeRect(x,y,width,height)
ctx.strokeStyle = 'blue'
ctx.strokeRect(50,50,350,300)
//4、 清除指定矩形区域 clearRect(x,y,width,height)
ctx.clearRect(10,80,100,100)
</script>
</body>
</html>
