【坑】html5中使用canvas绘制两个strokeRect之间忘了用beginPath()

来源：互联网发布：java考试及应用编辑：程序博客网时间：2024/06/05 04:42

代码

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">canvas {border: thin solid black;}</style></head><body><canvas id="canvas" width="1200" height="800"></canvas></body><script type="text/javascript">var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");context.beginPath();context.strokeStyle = "rgba(0,0,255,0.5)";context.lineWidth = 10;context.rect(10, 10, 500, 500);context.stroke();context.strokeStyle = "rgba(255,0,0,0.5)";context.lineWidth = 10;context.rect(150, 150, 500, 500);context.stroke();</script></html>

在线演示

原因

由于没有加context.beginPath()在两次绘制路径之间，所以浏览器会认为后面的那个rect绘制的是前一个rect的子路径，当第二的rect以rgba(255,0,0,0.5)颜色绘制的时候，由于它是子路径，就会把它的父路径也用同样的方式绘制一遍，所以第一个rect不是蓝色而是蓝色和红色的混合色（我这里使用了半透明以便你们看得出来是两种颜色的混合）

0 0