话不多说,上代码!!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<!--
canvas 提供了三种矩形的绘制方式
ctx.fillRect(x,y,width,height) :绘制一个填充矩形
ctx.strokeRect(x,y,width,height) : 绘制一个矩形的边框
ctx.clearRect(x,y,width,height) :清除指定的区域, 那一块矩形区域将变成透明
-->
<body>
<canvas id="can1" width="300" height="300"></canvas>
<script>
(() => {
let canvas = document.getElementById("can1")
if (!canvas.getContext) return
let ctx = canvas.getContext("2d")
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(10, 10, 50, 50); //绘制坐标 x,y,width, height
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(30, 30, 50, 50);
})()
</script>
<canvas id="can2" width="300" height="300"></canvas>
<script>
(() => {
let canvas = document.getElementById("can2")
let cvsCtx = canvas.getContext("2d")
cvsCtx.fillRect(10, 10, 80, 50);
cvsCtx.strokeRect(10, 80, 80, 50);
cvsCtx.fillRect(5, 140, 100, 80);
cvsCtx.clearRect(10, 155, 80, 50);
})()
</script>
</body>
</html>