Html 在 HTML5 Canvas 上绘制虚线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15397036/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drawing Dashed lines on HTML5 Canvas?
提问by April Lee
I would like to draw some dashed lines on HTML5 canvas. But I couldn't find there is such a feature. the canvas path could only draw solid lines. And people have tried to use some border feature (dotted, dashed) in CSS to draw dashed lines, but they could only be horizontal or vertical. So I got stuck on this. I also found a library called RGraphand it could draw dashed lines. But using an external library would make the drawing really slow. So does any body has an idea how to implement this? Any help will be appreciated.
我想在 HTML5 画布上画一些虚线。但是我找不到有这样的功能。画布路径只能绘制实线。并且人们尝试在 CSS 中使用一些边框特征（点、虚线）来绘制虚线，但它们只能是水平或垂直的。所以我被困在了这个问题上。我还发现了一个名为RGraph的库，它可以绘制虚线。但是使用外部库会使绘图速度变慢。那么有没有任何机构知道如何实现这一点？任何帮助将不胜感激。
回答by Jignesh Variya
回答by API
This is an easier way to create dashed lines :
这是创建虚线的更简单方法：
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.setLineDash([5, 15]);
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();
Hope that helps.
希望有帮助。
回答by Richard
FYI - dotted and dashed lines are part of some new canvas features that are now in the spec - and already implemented in Chrome (and now - Jan 2020 - probably other browsers too).
仅供参考 - 点划线是现在规范中的一些新画布功能的一部分 - 并且已经在 Chrome 中实现（现在 - 2020 年 1 月 - 可能还有其他浏览器）。
回答by matthew
You can use the setLineDash()method.
您可以使用该setLineDash()方法。
context.setLineDash([2,3]);
http://www.rgraph.net/blog/2013/january/html5-canvas-dashed-lines.html
http://www.rgraph.net/blog/2013/january/html5-canvas-dashed-lines.html
回答by markE
Drawing dashed lines on canvas
在画布上绘制虚线
I offer this up notas a complete solution, but as a simple way to draw a dotted line between any 2 points (a line at any angle). It draws very fast.
我提供的不是一个完整的解决方案，而是一种在任意两点之间绘制虚线（任意角度的线）的简单方法。它画得非常快。
You can modify it to fit your needs of a dashed line. Drawing dashes should not noticeably slow down the drawing.
您可以修改它以满足您对虚线的需求。绘制破折号不应明显减慢绘图速度。
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/pW4De/
这是代码和小提琴：http: //jsfiddle.net/m1erickson/pW4De/
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
DrawDottedLine(300,400,7,7,7,20,"green");
function DrawDottedLine(x1,y1,x2,y2,dotRadius,dotCount,dotColor){
var dx=x2-x1;
var dy=y2-y1;
var spaceX=dx/(dotCount-1);
var spaceY=dy/(dotCount-1);
var newX=x1;
var newY=y1;
for (var i=0;i<dotCount;i++){
drawDot(newX,newY,dotRadius,dotColor);
newX+=spaceX;
newY+=spaceY;
}
drawDot(x1,y1,3,"red");
drawDot(x2,y2,3,"red");
}
function drawDot(x,y,dotRadius,dotColor){
ctx.beginPath();
ctx.arc(x,y, dotRadius, 0, 2 * Math.PI, false);
ctx.fillStyle = dotColor;
ctx.fill();
}
