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

本文介绍了我可以使用html5画布制作虚线贝塞尔曲线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用html5画布创建了一条bezier曲线，我想知道是否可以使其变为虚线？我的代码是：

I have made a bezier curve using html5 canvas and I'm wondering if it's possible to make it dashed? My code is:

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

I have created a jsfiddle here

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

This is the first time I'm using html5 canvas so my skills with it aren't that great at this point. Thanks in advance.

推荐答案

对于Chrome，您可以使用：

For Chrome you can use:

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

对于Firefox，您可以使用：

For Firefox you can use:

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）：

Walking ants demo (from the archive - works in both Firefox and Chrome):
http://jsfiddle.net/AbdiasSoftware/Mnc94/

这篇关于我可以使用html5画布制作虚线贝塞尔曲线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

HTML5