1

我使用 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

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

4

2 回答 2

3

对于 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/

于 2013-06-24T22:20:56.557 回答
1

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

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

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

于 2013-06-24T21:06:41.967 回答