HTML5的canvas标签为什么会覆盖之前画的东西的颜色

图片说明
请注意这条线是黑色的 我选择颜色画第二条图片说明
为什么左边那条线变成红色了,被我选择的颜色给覆盖了???
源代码/
<!DOCTYPE html>



Title
<br> *{<br> margin: 0 auto;<br> }<br> canvas{<br> border:1px solid red;<br> }<br>



背景颜色:
画笔颜色:
画笔粗细:

1
2
3
4
10



你的浏览器不支持canvas标签



<br> var b = false;<br> var canvas = document.getElementById(&quot;my_canvas&quot;);<br> var draw =canvas.getContext(&quot;2d&quot;);<br> document.getElementById(&quot;my_canvas&quot;).onmousedown = function (e) {<br> draw.moveTo(e.offsetX,e.offsetY);<br> b = true;<br> }<br> document.getElementById(&quot;my_canvas&quot;).onmousemove = function (e) {<br> if(b){<br> draw.lineTo(e.offsetX,e.offsetY)<br> draw.stroke();<br> }<br> document.getElementById(&quot;p_1&quot;).innerHTML = e.offsetX+&quot; &quot; +e.clientY;<br> }<br> document.getElementById(&quot;my_canvas&quot;).onmouseup=function () {<br> b = false;<br> }<br> //画笔颜色变换<br> function penColorChange() {<br> draw.strokeStyle=&quot;red&quot;;<br> }<br>

你没有闭合路径 你可以用closePath（）来闭合就不会被覆盖了

因为canvas每次都是在重画，当你画第二笔的时候，其实第一笔也是在重新渲染。
MDN文档有说

如果你要改变一些会改变canvas状态的设置，要在改变前保存canvas状态

save（） 和 restore（） 两个方法。在改变颜色之前使用save（）保存之前的状态，在要回到之前的状态使用restore（）