【文末有改良版本】
![【原创+文末改良版本】canvas <wbr>上实现画出 <wbr>直线的虚线 【原创+文末改良版本】canvas <wbr>上实现画出 <wbr>直线的虚线](https://i-blog.csdnimg.cn/blog_migrate/a4c26d1e5885305701be709a3d33442f.gif)
虽然看着挺复杂,其实蛮简单的
只要直接调用
strokeDashed(c,solidLength,dashedLength,startX,startY,endX,endY) 即可。
其中参数分别表示:
【canvas.getContext("2d"),虚线的实线部分长度,虚线的虚线部分长度,起点的横坐标,起点的纵坐标,终点的横坐标,终点的纵坐标)】
括号里面是压缩过的代码,代码亲测可用,源代码下载链接在文末。
(如果你有什么好的想法 或 建议,欢迎留言)
(function strokeDashed(u,y,j,s,r,d,a){if((y+j)>p){alert("实线长度+虚线长度 不能大于 你所画的线的长度");return}if(r>a){var t;t=s;s=d;d=t;t=r;r=a;a=t}var n=(a-r)/(s>d?s-d:d-s);var v=a-d*n;var o=s;var m=r;var l;var h;var p=Math.sqrt(Math.pow(a-r,2)+Math.pow(Math.abs(s-d),2));var e=parseInt(p/(y+j));var w=p-e*(y+j);u.moveTo(o,m);if(s==d){for(var q=0;qy){m+=y;u.lineTo(o,m)}else{m+=w;u.lineTo(o,m)}u.stroke()}else{s>d?f(1):f(-1);u.stroke();function f(c){for(var b=0;by){x(n,y);g(c);u.lineTo(o,m)}else{x(n,w);g(c);u.lineTo(o,m)}}function g(b){if(b>0){o-=l;m+=h}else{if(b<0){o+=l;m+=h}}}function x(c,b){l=Math.sqrt(b*b/(c*c+1));h=l*c}}};)
---------------------------------------------------------------------------------------------------
代码容易乱,只有上图片了
效果图
----------------------------
-----------------------------------------
--------------------
在写这个,特别要注意的是:网页上的坐标系 和 数学上的坐标系是不同的哦!
----------------------------
-----------------------------------------
--------------------
图片中的源码下载链接:链接: http://pan.baidu.com/s/1qYMjJ9i 密码: 5cds
失效,可留言
----------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------
下面是画虚线的改良版本(上面的版本在实际使用过程中,产生了一定的错误,推荐使用改良版本)
----------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------
调用的方法名不变:
strokeDashed(c,"#000","#fff",10,10,5,20,355,60);
参数有所变化,分别是:
【canvas.getContext("2d"),虚线的实线部分的颜色,
虚线的虚线部分的颜色,
虚线的实线部分的长度,
虚线的虚线部分的长度,起点横坐标,起点纵坐标,终点横坐标,终点纵坐标】
与上面的有所变化的是:
上面采用画一段距离,然后画笔移动空一段距离,这样的在使用中,容易产生不明 BUG,所以改良后的采用颜色的不同来模拟虚线效果,实测中未曾产生 BUG。
压缩后的代码
【function strokeDashed(y,t,x,C,l,v,u,e,d){if(u>d){var w;w=v;v=e;e=w;w=u;u=d;d=w}var o=(d-u)/(v>e?v-e:e-v);var z=d-e*o;var p=v;var n=u;var m;var j;var q=Math.sqrt(Math.pow(d-u,2)+Math.pow(Math.abs(v-e),2));var f=parseInt(q/(C+l));var A=q-f*(C+l);if((C+l)>q){return}if(v==e){for(var s=0;sC){n+=C;y.lineTo(p,n)}else{n+=A;y.lineTo(p,n)}y.stroke()}else{v>e?g(1):g(-1);function g(c){for(var b=0;bC){B(o,C);h(c);y.lineTo(p,n)}else{B(o,A);h(c);y.lineTo(p,n)}y.stroke()}function h(b){if(b>0){p-=m;n+=j}else{if(b<0){p+=m;n+=j}}}function B(c,b){m=Math.sqrt(b*b/(c*c+1));j=m*c}}function r(){y.beginPath();y.strokeStyle=t;y.moveTo(p,n)}function a(){y.beginPath();y.strokeStyle=x;y.moveTo(p,n)}};】
改良后的源码链接:链接: http://pan.baidu.com/s/1eSGy6Ls 密码: 9uyc