HTML5 Canvas 画虚线组件

前段时间由于项目需要，用到了HTML5 Canvas画图，但是没有画虚线的方法，自己写了一个HTML5 画虚线的组件。

dashedLine.js

 1 if (window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype.lineTo) {
 2     CanvasRenderingContext2D.prototype.dashedLine = function (x, y, x2, y2, dashArray) {
 3         if (!dashArray) dashArray = [5, 5];
 4         var dashCount = dashArray.length;
 5         this.moveTo(x, y);
 6         var dx = (x2 - x), dy = (y2 - y);
 7         var slope = dy / dx;
 8         var distRemaining = Math.sqrt(dx * dx + dy * dy);
 9         var dashIndex = 0, draw = true;
10         while (distRemaining >= 0.1 && dashIndex < 10000) {
11             var dashLength = dashArray[dashIndex++ % dashCount];
12             if (dashLength == 0) dashLength = 0.001; // Hack for Safari
13             if (dashLength > distRemaining) dashLength = distRemaining;
14             var xStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
15             x += xStep
16             y += slope * xStep;
17             this[draw ? 'lineTo' : 'moveTo'](x, y);
18             distRemaining -= dashLength;
19             draw = !draw;
20         }
21         // Ensure that the last segment is closed for proper stroking
22         this.moveTo(0, 0);
23     }
24 }
25 //canvas 画布ID
26 //defaultX defaultY 起始坐标点
27 //x，y终点坐标点
28 function dashedLine(canvas, defaultX, defaultY, x, y) {
29     var c = document.getElementById(canvas);
30     var cxt = c.getContext("2d");
31     cxt.strokeStyle = 'black';
32     var dashes = "5 5";
33     var drawDashes = function () {
34         var dashGapArray = dashes.replace(/^\s+|\s+$/g, '').split(/\s+/);
35         if (!dashGapArray[0] || (dashGapArray.length == 1 && dashGapArray[0] == 0)) return;
36         cxt.lineWidth = "1";
37         cxt.lineCap = "round";
38         cxt.beginPath();
39         cxt.strokeStyle = 'red'
40         //开始画虚线。
41         cxt.dashedLine(defaultX, defaultY, x, y, dashGapArray);
42         cxt.closePath();
43         cxt.stroke();
44     };
45     drawDashes();
46 }

HTML页面调用

 1 <!DOCTYPE HTML>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 3 <title>HTML Canvas 画虚线</title>
 4 <script type="text/javascript" src="dashedLine.js"></script>
 5 </head>
 6 <body>
 7     <canvas id="can" width="240" height="240" style="border: 1px solid #00F">浏览器不支持HTML5！</canvas>
 8     <script type="text/javascript" charset="utf-8">
 9         dashedLine("can", 20, 20, 200, 200)
10     </script>
11 </body>
12 </html>