需求:绘制一个正方形,在正方形中再绘制一个小的正方形。把大的正方形填充成红色,小的正方形不填充。如下图:
先上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
#myCanvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="400"></canvas>
</body>
<script>
var myCanvas = document.querySelector('#myCanvas')
var ctx = myCanvas.getContext('2d')
// 绘制一个200px的正方形内嵌一个100px的正方形
// 200px的填充红色,100px的不填充
//200px的
ctx.moveTo(100, 100)
ctx.lineTo(300, 100)
ctx.lineTo(300, 300)
ctx.lineTo(100, 300)
ctx.closePath()
// 100px的
ctx.moveTo(150, 150)
ctx.lineTo(150, 250)
ctx.lineTo(250, 250)
ctx.lineTo(250, 150)
ctx.closePath()
ctx.fillStyle = 'red'
ctx.fill()
</script>
</html>
代码说明:大的正方形绘制的方向是顺时针,小的正发形绘制的方向是逆时针(绘制方向如下图)。利用非0环绕填充的规则就使得小的正方形没有被填充。
非0环绕填充规则:如果你想要知道一个区域有没有被填充,你可以再该区域画一条直线出去,遇到顺时针的就+1,逆时针就-1,然后相加,如果结果是0,该区域就不会被填充,如果是非0,就填充。例如:
再看: