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

【问题标题】：Can I make a dashed bezier curve using html5 canvas我可以使用 html5 画布制作虚线贝塞尔曲线吗
【发布时间】：2014-05-16 11:13:14
【问题描述】：

我使用 html5 画布制作了一条贝塞尔曲线，我想知道是否可以将其变为虚线？我的代码是：

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 here

这是我第一次使用 html5 画布，所以目前我的技能还不是很好。提前致谢。

【问题讨论】：

标签： html html5-canvas

【解决方案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
    }
}

Walking ant 演示（来自存档 - 适用于 Firefox 和 Chrome）：
http://jsfiddle.net/AbdiasSoftware/Mnc94/

【讨论】：

您可能指的是“Walking Ants”，而不是“Waking Ants”！
@markE 应该是mozDash（对不起，我的错……我的注意力被转移到了一个更重要的（？）错字上）：o]
@Ken - Abdias Software 感谢您的帮助。我会为你投票，但我的声誉还不够高。非常感谢。
你搞错了。 setLineDash 应该是未定义的，而不是“未定义的”。
另一个...我不确定--但可能自从您发布后它发生了变化，但它应该是“context.lineDashOffset = offset”。

【解决方案2】：

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

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

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

【讨论】：

这让我的整个曲线消失了。我做对了吗？ see the updated jsfiddle
setLineDash 承诺让“冲刺”比以前更容易，但是...警告：这是一项新功能，在许多浏览器中不存在（Chrome-是的，大多数其他浏览器-否）
@user1845661 我更正了我的答案。我愚蠢地认为 Chrome 中可用超过 6 个月的功能会“涓涓细流”到至少 Firefox。