如果后绘制的图形与前绘制的图形有重叠,则后绘制的图形会覆盖前绘制的图形
绘制矩形方法:
context.rect(x,y,width,height);// 指定矩形路径,后面还需要stroke()或fill()来绘制
context.fillRect(x,y,width,height);// 直接根据指定的路径来填充矩形
context.strokeRect(x,y,width,height);// 直接根据指定的路径来绘制矩形
eg1: rect(x,y,width,height)
<body>
<canvas id="canvas" style="border: 1px solid #eee;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = 1000;
canvas.height = 768;
context.rect(100, 100, 400, 400);
context.lineWidth = 5;
context.strokeStyle = 'red';
context.stroke();
</script>
</body>
eg1:结果
eg2: strokeRect(x,y,width,height)
<body>
<canvas id="canvas" style="border: 1px solid #eee;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = 1000;
canvas.height = 768;
context.lineWidth = 5;
context.strokeStyle = 'red';
context.strokeRect(100, 100, 400, 400);
</script>
</body>
eg2:结果
eg3: fillRect(x,y,width,height)
<body>
<canvas id="canvas" style="border: 1px solid #eee;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = 1000;
canvas.height = 768;
context.lineWidth = 5;
context.fillStyle = 'blue';
context.strokeStyle = 'red';
context.fillRect(100, 100, 400, 400);
context.strokeRect(100, 100, 400, 400);
</script>
</body>
eg3:结果