前段时间由于项目需要，用到了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. C#实现http协议支持上传下载文件的GET、POST请求

    C#实现http协议支持上传下载文件的GET.POST请求using System; using System.Collections.Generic; using System.Text; usin ...

  2. 长姿势 教你在qq空间上显示iPhone6尾巴

    下午刚午休完的时候,广州很多童鞋都感受到了震感,半青也感受到了,不仅如此,我还感受到了更大震感,那就是翻一下QQ空间动态,竟然看到有一位好友的尾巴竟然显示为“iPhone6”,顿时觉得该好友逼格太高了 ...

  3. 通过tarball形式安装HBASE Cluster（CDH5.0.2）——重新编译CDH5.0.2 HADOOP点滴

    本文参考博文Hadoop2.2.0遇到64位操作系统平台报错,重新编译Hadoop 由于我采用的tarball方式安装hadoop,其lib/native下根本没有内容,启动hdfs时报这个经典的na ...

  4. Alpine Linux：如何配置GUI的图形桌面环境：x Desktop Environment

    alpine linux 真是不错.小巧.迅捷! 官方的各个版本的alpine镜像内没有带图形环境的.那我们如何构建自己的桌面图形环境呢? 其实:这个问题,在起官网的wiki内有指南,我们根据那些相关 ...

  5. IBM Personal Communications 软件：精简绿色版TN3270终端模拟器：经测试可以在 （winxp、win2003、win764）上运行

    全系列版本啊!耗费了我大量的时间和精力,深夜熬到3点! 注意:如何使用?解压后,里面有个reg注册表文件,以管理员权限用户双击加载即可. http://files.cnblogs.com/files/ ...

  6. MongoDB 连接池

    http://www.cnblogs.com/huangfox/archive/2012/04/01/2428947.html http://www.iteye.com/problems/97350

  7. Strict Mode (JavaScript)

    摘要: ECMAScript5中引入的严格模式,通过让JavaScript运行环境对一些开发过程中最常见和不易发现的错误做出和当前不同的处理,来让开发者拥有一个”更好”的JavaScript语言.但目 ...

  8. @PropertySource加载文件的两种用法以及配置文件加载顺序

    第一种: 现在我把资源文件的路径放在application.properties里 config.path=/home/myservice/config.properties @PropertySou ...

  9. Python中的yield和Generators（生成器）

    本文目的 解释yield关键字到底是什么,为什么它是有用的,以及如何来使用它. 协程与子例程 我们调用一个普通的Python函数时,一般是从函数的第一行代码开始执行,结束于return语句.异常或者函 ...

  10. systemctl命令完全指南

    Systemctl是一个systemd工具,主要负责控制systemd系统和服务管理器. Systemd是一个系统管理守护进程.工具和库的集合,用于取代System V初始进程.Systemd的功能是 ...