前段时间由于项目需要，用到了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. Objective-C 语法之 Debug 表达式

    main.m #import <Foundation/Foundation.h> #import "TestClass.h" int main(int argc, co ...

  2. vue如何加入百度联盟广告

    在百度联盟代码位管理中创建好对应的代码位之后,点击获取代码,会看到这样一段js 直接复制粘贴到自己网页中便可显示对应广告. 在vue中由于都是vue组件,不支持直接在组件中加入这样一段一段的js代码, ...

  3. Java面试经典题：线程池专题

    1.什么是线程池 线程池的基本思想是一种对象池,在程序启动时就开辟一块内存空间,里面存放了众多(未死亡)的线程,池中线程执行调度由池管理器来处理.当有线程任务时,从池中取一个,执行完成后线程对象归池, ...

  4. 18 如何使用go来采集windows的基本硬件信息后发送到CMDB的服务器上

    preface 之前我使用python写了cmdb采集的脚本,打包成exe的二进制文件后放在windows上执行,也达到了预期的效果. 但是最近部门要上open-falcon监控体系,每个服务器都要安 ...

  5. 在Linux上安装SVN服务

    1.安装SVNyum install subversion 2.查看版本svnserve --version3.创建目录mkdir -p /web/svndata3.创建repo测试库svnadmin ...

  6. selenium chrome登陆手机 pc淘宝

    接口登录淘宝,困难度极高,没有人已经实现过. 淘宝登录selenium 手机版  pc版. 由于每天需要使用ip代理大批量的异地登录淘宝帐号,这种情况必然会出现淘宝滑动验证码,使用ActionChai ...

  7. CentOS 6.3 + Subversion + Usvn 搭建版本管理服务器

    一． Subversion 简介 Subversion是一个自由,开源的版本控制系统.在Subversion管理下,文件和目录可以超越时空.Subversion将文件存放在中心版本库里.这个版本库很像 ...

  8. C#索引器理解

    C#索引器介绍举例 索引器允许类或者结构的实例按照与数组相同的方式进行索引取值,索引器与属性类似,不同的是索引器的访问是带参的. 索引器和数组比较: (1)索引器的索引值(Index)类型不受限制 ( ...

  9. 【数据分析】Superset 之二 Docker安装初始化

    docker search superset amancevice/superset [] Superset on Debian/Python3 [OK] docker pull amancevice ...

  10. 深度缓存ZBuffer线性化

    double linearizeDepth(double nearz,double farz,double depth) { depth = 2.0 * depth - 1.0; return (2. ...