我可以使用html5画布制作一条虚线贝塞尔曲线吗

Question

我已经使用html5画布制作了一条bezier曲线，我想知道是否可以使其虚线？我的代码是：

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d")
ctx.lineWidth = 2;
ctx.strokeStyle = "#fff";
ctx.beginPath();
ctx.moveTo(-200, 350);
ctx.bezierCurveTo(199, 604, 220, 180, 500, 350);
ctx.stroke();

我在这里创建了一个jsfiddle

这是我第一次使用html5画布，所以我的技能在这一点上并不是很好。提前谢谢。

Answer 1

对于Chrome，您可以使用：

context.setLineDash([2,3,...]);  //pattern, can be more than 2 entries
context.lineDashOffset(0);       //start point (ie. walking ants)
context.getLineDash();

对于Firefox，您可以使用：

context.mozDash = [2,3,...];     //prefixed for Mozilla at this time
context.mozDashOffset = 0;

一个通用函数：

function setDash(context, array, offset) {
    offset = (typeof offset === 'number') ? offset : 0;
    if (typeof context.setLineDash === 'undefined') { //Firefox
        context.mozDash = array;
        context.mozDashOffset = offset;
    }
    else { //Chrome
        context.setLineDash(array);
        context.lineDashOffset = offset
    }
}

行走的蚂蚁演示（来自档案-适用于Firefox和Chrome）：
http://jsfiddle.net/AbdiasSoftware/Mnc94/

Answer 2

自2013年1月起，您可以在带有ctx.setLineDash([2,3]);的Chrome中执行此操作，其中2是以像素为单位的笔划，3是以像素表示的空格。

然而，其他浏览器还没有实现这一点（Firefox、IE10、Safari、Opera）。这是一个未来尚未实现的简化。Mozilla有一个实验版本mozDash，但我还没有测试过。

我建议您对此进行检查，因此如果此方法存在，则该线将显示为虚线，否则将不显示-但这是假设有线总比没有线好。另一种选择是通过计算弧长和打开和关闭笔划来实现自己的曲线绘制。请参阅此处的答案：Html5 Canvas Bezier 上的虚线