前段时间由于项目需要，用到了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. CorelDRAW中如何再制对象详解

    再制对象指的是快捷地将对象按一定的方式复制为多个对象,此种复制是复制的复制,再制不仅可以节省复制的时间,再制间距还可以保证复制效果.本教程将详解如何在CorelDRAW软件中再制对象. CorelDR ...

  2. RequestDispatcher 的 forward和include

    1.RequestDispatcher 的 forward和include: http://www.avajava.com/tutorials/lessons/what-is-a-request-di ...

  3. mysql中json_replace函数的使用?通过json_replace对json对象的值进行替换

    需求描述: 在看mysql中关于json的内容,通过json_replace函数可以实现对json值的替换, 在此记录下. 操作过程: 1.查看带有json数据类型的表 mysql> selec ...

  4. svg文字与图像

    摘要: svg与canvas一样都可以将文本和图像放在画布中,制作出不一样的效果.下面是如何使用svg来渲染文本与图像. 简介: SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度 ...

  5. Git学习笔记(三)

    Git提交相关内容 在Git提交时,会保存一个提交对象,该对象包括一个指向暂存区内容快照的指针,包括本次提交作者等相关附属信息,包括零个或多个指向该提交对象的父对象指针:首次提交时是没有祖先,普通提交 ...

  6. Linux Eclipse 运行Protobuf

    安装环境Ubuntu 14.04 64 bit 安装过程分为三步 1. Linux下安装Protobuf 2. Eclipse下安装protobuf.dt插件 3. Eclipse下配置动态链接库并运 ...

  7. Go之Channel详解

    channel取数据时未被赋值将被阻塞,可以使用这一机制来完成事件的监听 wg := new(sync.WaitGroup) wg.Add(2) event := make(chan bool) // ...

  8. PHPDragon设计结构

    PHPDragon的设计思路来源至YII框架,可以吐槽作者本人完全copy,但希望在后面,会慢慢的走出一条不同的分支. 1.Dragon.php(DragonBase.php)入口文件,负责程序的自动 ...

  9. ios开发之--NSString的操作

    NSString的操作,下面记录下他的常用方法: NSString *str = @"1111111111aaaaaaaaa2222222222"; 1.查找 //查找 NSRan ...

  10. iOS开发-NSDictionary

    判断一个字典中是否存在某个key,有两种方法: 方法一: if ([dictionary allKeys] containsObject: key]){ // cotains key operatio ...