扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编给大家分享一下使用Canvas绘制虚线的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
在成都网站制作、做网站中从网站色彩、结构布局、栏目设置、关键词群组等细微处着手，突出企业的产品/服务/品牌，帮助企业锁定精准用户，提高在线咨询和转化，使成都网站营销成为有效果、有回报的无锡营销推广。创新互联建站专业成都网站建设10余年了，客户满意度97.8%，欢迎成都创新互联客户联系。
下面我们就来看看虚线的绘制方法
语法
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();
}因此绘制虚线也是非常简单，我们试着改变setLineDash()方法的参数看看结果有什么不同
= 4= 'green'50, 60400, 60= 4= 'red'0, 100400, 100
从这个例子我们可以看出当我们的参数数组只有一个元素时我们的 “线段与间隔” 是相等的，当参数数组的元素为空时，我们绘制的是一条实线。
我们在来看几个例子
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()方法是根据参数中的元素在 “线段与间隔” 之间形成组，然后进行循环，进而绘制出虚线。
但是第二个例子当中我们传入的参数的元素个数是基数，看起来和参数元素为偶数时有点区别，它会复制元素并重复，
这就是我们开始所说的 如果参数 segments元素的数量是奇数， 数组的元素会被复制并重复。[10, 20, 30] 会变成 [10, 20, 30, 10, 20, 30]。
getLineDash 方法
有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();
以上是使用Canvas绘制虚线的方法的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网