怎么运用Canvas绘制虚线--百分百源码网

怎么运用Canvas绘制虚线-

发布时间：08/01 来源：未知浏览：关键词：

上一章节我们说到，线性途径的绘制，主要应用movoTo()，lineTo()等办法，固然Canvas2DAPI也供给了虚线的绘制办法，CanvasRenderingContext2D.setLineDash();下面我们就来看看虚线的绘制办法?语法ctx.setLineDash(segments);参数segments：一个Array数组。一组描述交替绘制线段上一章节我们说到，线性途径的绘制，主要应用movoTo()，lineTo()等办法，固然 Canvas 2D API 也供给了虚线的绘制办法，CanvasRenderingContext2D.setLineDash();

下面我们就来看看虚线的绘制办法

语法

ctx.setLineDash(segments);

参数 segments：

一个Array数组。

一组描述交替绘制线段和间距（坐标空间单位）长度的数字。

要是数组元素的数目是奇数，数组的元素会被复制并反复。例如， [5, 15, 25] 会酿成 [5, 15, 25, 5, 15, 25]。

这里最后一句话有可能我们没有看明确，不妨事我们继续往下看。

我们先绘一条简略的虚线

function drawDashed(){
　　cxt.lineWidth = 4;
　　cxt.strokeStyle = 'green';
　　cxt.beginPath();
　　cxt.setLineDash([5, 15]);
　　cxt.moveTo(20, 20);
　　cxt.lineTo(400, 20);
　　cxt.stroke();
}

从这个例子我们可以看出当我们的参数数组只要一个元素时我们的 “线段与隔断” 是相称的，当参数数组的元素为空时，我们绘制的是一条实线。

我们在来看几个例子

function drawDashed(){
    cxt.lineWidth = 4;

    cxt.strokeStyle = 'blue';
    cxt.beginPath();
    cxt.setLineDash([20, 5]);
    cxt.moveTo(20, 40);
    cxt.lineTo(380, 40);
    cxt.stroke();

    cxt.strokeStyle = 'green';
    cxt.beginPath();
    cxt.setLineDash([10, 20, 30]);
    cxt.moveTo(20, 80);
    cxt.lineTo(380, 80);
    cxt.stroke();

    cxt.strokeStyle = 'red';
    cxt.beginPath();
    cxt.setLineDash([10, 20, 30, 40]);
    cxt.moveTo(20, 120);
    cxt.lineTo(380, 120);
    cxt.stroke();
}

有setLineDash的办法去设定虚线的线段与间距，响应的有个办法是猎取虚线的线段和间距的办法。

ctx.getLineDash()

该办法返回一个 Array数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。要是数组元素的数目是奇数，数组元素会被复制并反复。例如，设定线段为 [5, 15, 25] 将会得到下列返回值 [5, 15, 25, 5, 15, 25]。

var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");
ctx.setLineDash([5, 15]);ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();

console.log(ctx.getLineDash()); // [5, 15]

扩展CanvasRenderingContext2D 绘制虚线

我们不仅可以应用 canvas API 绘制虚线，我们还可以扩展一个本人绘制虚线的办法。
扩展思绪：
1. 猎取起点坐标
2. 盘算虚线的总长度，盘算虚线包括多少短线然后轮回绘制

话未几说，我们直接上代码

var canvas = document.getElementById('canvas');var cxt = canvas.getContext('2d');var moveToFunction = CanvasRenderingContext2D.prototype.moveTo;
CanvasRenderingContext2D.prototype.moveToLocation = {};// 从新定义moveTo办法CanvasRenderingContext2D.prototype.moveTo = function (x, y){this.moveToLocation.x = x;this.moveToLocation.y = y;
    moveToFunction.apply(this, [x, y]);
};
CanvasRenderingContext2D.prototype.dashedLineTo = function(x, y, dashedLength){
    dashedLength = dashedLength === undefined ? 5 : dashedLength;var startX = this.moveToLocation.x;var startY = this.moveToLocation.y;var deltaX = x - startX;var deltaY = y - startY;var numberDash = Math.floor(Math.sqrt(deltaX*deltaX + deltaY*deltaY)/dashedLength);for(var i=0; i < numberDash; i++){this[i%2 === 0 ? 'moveTo' : 'lineTo'](startX + (deltaX/numberDash)*i, startY + (deltaY/numberDash)*i); //等同于this.moveTo(x, y)或者 this.LineTo(x, y)    }this.moveTo(x, y); //连续绘制虚线时，起点从当前点开始};//绘制虚线cxt.lineWidth = 3;
cxt.strokeStyle = 'green';
cxt.moveTo(20, 20);
cxt.dashedLineTo(200, 200);
cxt.dashedLineTo(300, 100, 10);
cxt.dashedLineTo(400, 300);
cxt.stroke();

总结：

我们可以通过setLineDash()办法绘制虚线，该办法会以参数的元素个数为组的情势去进行轮回绘制，但是要注意传入办法是参数的元素个数。

我们还可以自定义扩展绘制虚线的办法，主要就是猎取起点进而盘算线段数进行轮回绘制

对canvas绘制图形感乐趣的同窗，请延续关注后续更新，若有不合错误的地方也请指出并多多交换。

如需转载，还请说明出处，非常谢谢！

以上就是怎么运用Canvas绘制虚线的细致内容，更多请关注百分百源码网其它相干文章！

打赏