HTML5 JS画布意外线条样式
根据之前的经验和在线文档，下面的代码应该生成两条垂直线，一条红色，另一条绿色。
取而代之的是，我得到两条绿线或者我最后设置的任何strokeStyle。
我看不出这个代码哪里错了。此外，可能是我的浏览器让事情变得一团糟。
JS小提琴和代码：
<html>
<body>
<canvas></canvas>
<script>
var cvs = document.getElementsByTagName("canvas")[0];
var ctx = cvs.getContext("2d");
ctx.strokeStyle = "#ff0000";
ctx.moveTo(1, 0);
ctx.lineTo(1, 10);
ctx.stroke();
ctx.strokeStyle = "#00ff00";
ctx.moveTo(11, 0);
ctx.lineTo(11, 10);
ctx.stroke();
</script>
</body>
</html>
共有2个答案
您需要在第一行之后第二行之前调用closePath（）。
请注意，它将使您回到起点。
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/closePath
编辑：
我假设这两条路都是在OP描述线条颜色相同而不是完全没有画的情况下开始的。
有趣的是，在一个小的局部测试中，线条确实没有任何开始路径，但是第一条线用预期第二条路径的颜色画了两次。
正确答案是每次使用beginPath（）和closePath（），如下所示：
ctx.beginPath();
ctx.strokeStyle = "#ff0000";
ctx.moveTo(1, 0);
ctx.lineTo(1, 10);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.strokeStyle = "#00ff00";
ctx.moveTo(11, 0);
ctx.lineTo(11, 10);
ctx.stroke();
ctx.closePath();
使用ctx。beginPath（）当您开始新行时（这将隐式关闭以前的路径）。
jsFiddle。
-
问题内容： 我有一个和画布，使用以下方式绘制： 绘图看起来很模糊（lineWidth小于1会产生更差的图片），并且在div的边界附近没有任何内容。是否可以使用画布获得与HTML相同的绘图质量？ 问题答案： 在画布上绘制线条时，实际上需要跨越像素。我认为这是API中的一个奇怪选择，但易于使用： 代替这个： 做这个： 深入了解HTML5的画布一章，就可以很好地讨论这一点（寻找“ ASK PROFESS
-
我试图创建一个画布，在其中我们可以绘制直线和矩形使用鼠标事件的功能选择的输入。 我将mousedown、mousemove和mouseup事件侦听器附加到画布DOM，并在选择行输入或矩形输入时使用适当的函数 但它什么也没有画出来。 null null
-
在IE9画布中现在是否支持虚线/点线？目前我正在做与以下内容非常相似的事情： 这在IE7、IE8、IE9兼容模式和FireFox中工作很好，然而，在IE9和Chrome中，为每条虚线绘制一个实心笔画。 对为什么会发生这种情况有什么想法吗？
-
我已经在谷歌上搜索了这个问题，并提出了各种解决方案。 但是，没有一个对我有效。 我在一个应用程序中有一个绘图画布。 画布的背景被设置为活动中的png图像，该活动使用自定义视图（drawView）； 在DrawingView类（drawview是实例）中，我将绘制的路径存储在一个PathPaints集合中，该集合有3个属性（路径、使用的油漆以及如果是橡皮擦）； 我已经尝试在drawpath上设置油漆
-
我有以下代码应该在图像中绘制线条。我的代码是： 如果我编写，它实际上可以工作。但是我的数组很长并且来自一个输入。
-
Canvas为图形提供了一些默认样式，如线条、填充的默认颜色为黑色等。但是，这些默认样式无法满足所有用户的需求，也无法体现Canvas的灵活性，故Canvas为图形定义了一些属性，以便用户自定义图形的样式。 线条的样式 在绘制线段时，可以通过上下文对象的一些属性来控制线条的宽度、线条的颜色、线条连接点的样式、线帽样式等，各属性的含义见表 4‑2： 表 4‑2 线条的样式属性及含义 属性 含义 li