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>

效果图

HTML5 Canvas 画虚线组件相关推荐

html5画直线箭头,HTML5 canvas画带箭头的虚线
今天给大家讲解的是在HTML5 canvas画带箭头的虚线.关于Canvas 对象表示一个 HTML 画布元素 -.它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作. 本案例注意事项 ...
html5垂直线怎么画,HTML5 Canvas画线技巧
正统的HTML5 Canvas中如下代码复制代码代码如下: ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(3 ...
html5画虚线,html5 实现画虚线
html5已经出来好长一段时间了,只是最近才开始接触到它,html5提供了很多内置的函数可以实现很多功能,比如画线段.画矩形.画圆.画弧等.但是html5没有提供画 html5已经出来好长一段时间了 ...
毛边效果 html,Html5 Canvas画线有毛边解决方法
例外参考:http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A% ...
html画布直线代码,图文详解如何用html5 canvas画一条直线
是HTML5 中新增的元素,它可以结合JavaScript脚本绘制出各种各样的图形,对于canvas你了解多少?你会用canvas画直线吗?这篇文章就和大家讲讲如何用canvas画一条直线,有一定的参 ...
毛边效果 html,详解Html5 Canvas画线有毛边解决方法
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按 ...
Html5 Canvas画线有毛边解决方法
例外参考:http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A% ...
html 圆饼画布,html5 canvas画饼
2. [文件] lqdpie.html ~ 801B 下载(7) 刘强东吃饼 Your browser does not support the HTML5 canvas tag. var ...
html5 canvas 画阿迪达斯logo,HTML5 Canvas笔记——HTML5 Canvas绘图绘制太极图
HTML5 Canvas绘图绘制太极图太极图 * { padding: 0; margin: 0; } body { } #myCanvas { background-color: #eee; } ...

HTML5 Canvas 画虚线组件

HTML5 Canvas 画虚线组件相关推荐

最新文章

热门文章