如何使用 ctx html 在 Line 中填充颜色？

如何解决如何使用 ctx html 在 Line 中填充颜色？

请检查此链接 https://www.jovianarchive.com/content/charts/628003987200000000_.png。我正在创建相同的图表，但所有线条和几何形状都是动态的。在行有颜色与黑色和红色的组合（看起来像条纹）要相同。我的代码

ctx.fillStyle = 'blue';
ctx.fill();
ctx.strokeStyle = 'blue';
ctx.stroke();

解决方法

你需要在调用stroke方法之前创建一个Path：

 canvas =     document.getElementById("canvas");
 ctx = canvas.getContext("2d");
 ctx.fillStyle = 'blue';
 ctx.strokeStyle = 'blue';
 //point 0,0
 ctx.moveTo(0,0);
 //to point 300,150
 ctx.lineTo(300,150);
 ctx.closePath();

 ctx.stroke();
 ctx.fill();

您可以更改线宽并添加阴影。看看我的项目：

https://codepen.io/Luis4raujo/pen/GRNEPXO

如果这个评论对你有帮助，请投票给我的答案！

您可能需要考虑创建一个模式。您可以从图像或屏幕外画布创建它。下面是第二种方式的快速演示：https://codesandbox.io/s/awesome-khorana-ystxp?file=/index.html

有关在 html 画布中创建模式的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createPattern