<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas画矩形</title>
<style>
body{margin: 0;overflow: hidden;}
#test{background-color: antiquewhite;}
</style>
</head>
<body>
<canvas id="test"></canvas>
<script>
//获取画布
const cvs = document.getElementById("test");
//设置长宽
cvs.width = window.innerWidth;
cvs.height = window.innerHeight;
//获取画笔
const ctx = cvs.getContext('2d');
/*填充矩形方法:fillRect(x,y,w,h)*/
ctx.fillStyle='blue';
ctx.fillRect(
50,50,
400,200
);
/*描边矩形方法:strokeRect(x,y,w,h)*/
ctx.strokeStyle='yellow';
ctx.lineWidth=10;
ctx.strokeRect(50, 50, 400, 200);
/*清理矩形方法:clearRect(x,y,w,h)*/
ctx.clearRect(50, 120, 400, 60);
</script>
</body>
</html>