Javascript 线宽扩展到所有画布对象_Javascript_Html_Canvas

Javascript 线宽扩展到所有画布对象

javascript html canvas

Javascript 线宽扩展到所有画布对象,javascript,html,canvas,Javascript,Html,Canvas,我遇到了一个问题，我在一个画布对象中添加了一个线宽，然后同一画布中的所有画布对象都获得了相同的线宽。例如： <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</can

我遇到了一个问题，我在一个画布对象中添加了一个线宽，然后同一画布中的所有画布对象都获得了相同的线宽。例如：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.lineWidth = 10;
ctx.closePath();
ctx.stroke();
ctx.fillStyle="red";
ctx.fill();

ctx.beginPath();
ctx.arc(200, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle="blue";
ctx.fill();
ctx.stroke();
ctx.closePath();

</script>

</body>
</html>


您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.moveTo（20,20）；
ctx.lineTo（20100）；
ctx.lineTo（70100）；
ctx.线宽=10；
ctx.closePath（）；
ctx.stroke（）；
ctx.fillStyle=“红色”；
ctx.fill（）；
ctx.beginPath（）；
ctx.arc（200,100,50,0,2*Math.PI）；
ctx.fillStyle=“蓝色”；
ctx.fill（）；
ctx.stroke（）；
ctx.closePath（）；

如何使线宽仅应用于一个对象？

它是基于状态的。稍后必须将线宽重置为下一条路径所需的值

我会试着设置

ctx.lineWidth = 0;

再次调用

ctx.stroke（）

之前。

将线宽行更改为：

var defaultLineWidth = ctx.lineWidth;
ctx.lineWidth = 10;

然后在第二个绘图操作中，添加以下内容：

ctx.lineWidth = defaultLineWidth;

所以你的意思是，如果我以后想要默认线宽，我需要把线宽设为1；

ctx.lineWidth = defaultLineWidth;