前段时间由于项目需要，用到了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. thinkphp 外部js语言包

    Thinkphp php文件也外部js文件公用同一个语言包 一 . php语言包转json数据格式 1.新建验证字段的语言包 application\common\lang\validate-cn.p ...

  2. SharePoint 2013 隐藏左边快速启动菜单栏(Hiding the Quick Launch Bar)

    在SharePoint 2013默认网站页面中,很多时候,我们需要隐藏左边快速启动菜单栏,这时我们可以通过下面的样式来实现隐藏它. 和SharePoint 2010不太一样,方法改了,不过性质是一样的 ...

  3. 本地文件到通过flume到hdfs

    配置文件 cd /usr/app/flume1.6/conf vi flume-dirTohdfs.properties #agent1 name agent1.sources=source1 age ...

  4. Java实现文件批量重命名

    Windows操作系统可以实现重命名文件操作,却不能实现批量重命名.本实例实现了批量重命名功能,可以将一个文件夹内同一类型的文件按照一定的规则批量重命名.用户可以给出重命名模板,程序可以根据模板对相应 ...

  5. webApi之FromUri和FromBody区别

    public Link GetLink([FromUri] FileRequest fileRequest) { if (ModelState.IsValid) { var xml = WebConf ...

  6. lua 按拉分析与合成

    -- 将数值分解成bytes_table local function decompose_byte(data) if not data then return data end local tb = ...

  7. 使用 vux 框架

    1)vux官网:https://vux.li/#/ 2)通过 vue-cli 工具使用 vux 1.如果没有安装 nodejs,请先前往 nodejs 官网下载并安装 nodejs,传送门:https ...

  8. 使用librtmp进行H264与AAC直播

    libx264 版本是 128libfaac 版本是 1.28 1.帧的划分 1.1 H.264 帧 对于 H.264 而言每帧的界定符为 00 00 00 01 或者 00 00 01. 比如下面的 ...

  9. sql 替换字符串

    MSSQL替换语句: )),'abc.com','123.com') 例如: update PE_Article set Content=replace(cast(Content as varchar ...

  10. 【译】Apache Flink Kafka consumer

    Flink提供了Kafka connector用于消费/生产Apache Kafka topic的数据.Flink的Kafka consumer集成了checkpoint机制以提供精确一次的处理语义. ...