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

dashedLine.js

 if (window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype.lineTo) {

     CanvasRenderingContext2D.prototype.dashedLine = function (x, y, x2, y2, dashArray) {

         if (!dashArray) dashArray = [5, 5];

         var dashCount = dashArray.length;

         this.moveTo(x, y);

         var dx = (x2 - x), dy = (y2 - y);

         var slope = dy / dx;

         var distRemaining = Math.sqrt(dx * dx + dy * dy);

         var dashIndex = 0, draw = true;

         while (distRemaining >= 0.1 && dashIndex < 10000) {

             var dashLength = dashArray[dashIndex++ % dashCount];

             if (dashLength == 0) dashLength = 0.001; // Hack for Safari

             if (dashLength > distRemaining) dashLength = distRemaining;

             var xStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope));

             x += xStep

             y += slope * xStep;

             this[draw ? 'lineTo' : 'moveTo'](x, y);

             distRemaining -= dashLength;

             draw = !draw;

         }

         // Ensure that the last segment is closed for proper stroking

         this.moveTo(0, 0);

     }

 }

 //canvas 画布ID

 //defaultX defaultY 起始坐标点

 //x，y终点坐标点

 function dashedLine(canvas, defaultX, defaultY, x, y) {

     var c = document.getElementById(canvas);

     var cxt = c.getContext("2d");

     cxt.strokeStyle = 'black';

     var dashes = "5 5";

     var drawDashes = function () {

         var dashGapArray = dashes.replace(/^\s+|\s+$/g, '').split(/\s+/);

         if (!dashGapArray[0] || (dashGapArray.length == 1 && dashGapArray[0] == 0)) return;

         cxt.lineWidth = "1";

         cxt.lineCap = "round";

         cxt.beginPath();

         cxt.strokeStyle = 'red'

         //开始画虚线。

         cxt.dashedLine(defaultX, defaultY, x, y, dashGapArray);

         cxt.closePath();

         cxt.stroke();

     };

     drawDashes();

 }

HTML页面调用

 <!DOCTYPE HTML>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>HTML Canvas 画虚线</title>

 <script type="text/javascript" src="dashedLine.js"></script>

 </head>

 <body>

     <canvas id="can" width="240" height="240" style="border: 1px solid #00F">浏览器不支持HTML5！</canvas>

     <script type="text/javascript" charset="utf-8">

         dashedLine("can", 20, 20, 200, 200)

     </script>

 </body>

 </html>

效果图

HTML5 Canvas 画虚线组件的更多相关文章

  1. 基于 HTML5 Canvas 的拓扑组件开发

    在现在前端圈大行其道的 React 和 Vue 中,可复用的组件可能是他们大受欢迎的原因之一, 在 HT 的产品中也有组件的概念,不过在 HT 中组件的开发是依托于 HTML5 Canvas 的技术去 ...

  2. HTML5 Canvas 画钟表

    画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta ht ...

  3. CSS3进度条 和 HTML5 Canvas画圆环

    看到一些高大上的进度条插件,然后想自己用CSS写.经过搜索资料之后,终于成功了.为了以后方便拿来用,或者复习.将代码贴出. HTML代码: 只需要两个div,外面的为一个有border的div id为 ...

  4. html5 canvas画饼

    1. [图片] lxdpie.jpg ​2. [文件] lqdpie.html ~ 801B     下载(7) <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...

  5. html5 canvas画不出图像的原因

    很久没写博客了,今年过年的时候,家里出了意外,现在心里依然很难受.6月份之前一直忙着写毕业论文,答辩完6月初回公司继续上班,今天刚好周末有空,就写下之前碰到一个问题. 做一个图像查看器(基于Chrom ...

  6. HTML5 Canvas 画纸飞机组件

    纸飞机模拟一个物体在规定设计轴线偏离方位. //三角形 function DrawTriangle(canvas, A, B, C) { //画个三角形,“A.B.C”是顶点 with (canvas ...

  7. 基于 HTML5 Canvas 的拓扑组件 ToolTip 应用

    前言 ToolTip 效果是网页制作中常见的使用特效.当用户将鼠标悬浮在某个控件上时,ToolTip 显示并向用户展示相应的提示信息:当鼠标离开时,ToolTip 隐藏.一般情况下,我们使用 Tool ...

  8. html5 canvas画流程图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. HTML5 Canvas画数字时钟

    先不说废话,没代码算个蛋. 一些地方注释都写得比较清楚,不过这只是部分,因为只有秒针,但是时针,分针的逻辑都是一致的. 代码中有些坐标不知道为什么较不准,看看就好

随机推荐

  1. 【玩转Golang】 通过组合嵌入实现代码复用

    应用开发中的一个常见情景,为了避免简单重复,需要在基类中实现共用代码,着同样有助于后期维护. 如果在以往的支持类继承的语言中,比如c++,Java,c#等,这很简单!可是go不支持继承,只能mixin ...

  2. PHP上传原理及操作实现

    关于PHP上传文件的函数类库,网上有许多封装很完善,大家直接拿来用就可以. 本文章只是说下关于上传原理和简单的上传操作,老鸟就无视了哈^_^~ 还有一些安全性判断比如:服务端限制能接收图片类型的文件, ...

  3. js简单Base64编码解码

    var str = 'javascript'; window.btoa(str) //转码结果 "amF2YXNjcmlwdA==" window.atob("amF2Y ...

  4. apt 之 最强技能：【欺骗】，文雅点【偷梁换柱】！

    apt这种软件包管理系统,有个最大特点是:只照本宣科,而不管实际情况. 所以,我们用户就可以利用这一点,来欺骗它,达到我们的目的. ------------------------------好了,现 ...

  5. 使用intellij idea打包并部署到外部的tomcat

    1.使用intellij idea创建项目demotest File -> New -> Project-> Spring Initializr,根据提示一步步操作 会生成一个带有 ...

  6. BarTender软件中GS1-128条码如何制作?

    GS1-128条码是UCC/EAN-128条码的新名字,它只是Code 128的一个特殊子集.GS1-128条码是EAN·UCC系统中唯一可用于表示附加信息的条码,可广泛用于非零售贸易项目.物流单元. ...

  7. geoserver 地图性能和缓存

    1.什么是GeoWebCache GeoWebCache是地图缓存软件公司成员开发的一个基于java的开源项目.和其他的缓存系统相似,它作为一个客户端和地图服务的代理.它可以单独部署,适用于任何基于W ...

  8. PHP对HTML代码尸体编码2个函数

    1.htmlspecialchars() 函数把一些预定义的字符转换为 HTML 实体. 2.htmlentities() 函数把字符转换为 HTML 实体. 记录下

  9. repo_folder

    -- Create table create table REPO_FOLDER ( UUID ) not null, VALID ) not null, CREATE_TIME ) not null ...

  10. 深入理解css3中的flex-grow、flex-shrink、flex-basis

    https://www.cnblogs.com/ghfjj/p/6529733.html