【原创+文末改良版本】canvas&nbsp…

【文末有改良版本】

虽然看着挺复杂，其实蛮简单的

只要直接调用 

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