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 here

这是我第一次使用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月起，您可以在Chrome中使用ctx.setLineDash([2,3]);执行此操作，其中2是以像素为单位的笔划，3是以像素为单位的空格。

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

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

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

2 个答案: