<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#myCanvas{
border: 1px solid gray;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>
var myCanvas = document.getElementById('myCanvas')
var ctx = myCanvas.getContext('2d')
/* strokeRect描边一个矩形
fillStyle设置填充的颜色
fillRect填充一个矩形 */
ctx.strokeRect(100,100,150,30)
ctx.fillStyle = 'red'
// ctx.fillRect(100,100,150,30)
ctx.fillRect(100,100,75,30)
</script>
</html>
