预备知识

直线的斜率

一条直线与某平面直角坐标系x轴正半轴方向的夹角的正切值即该直线相对于该坐标系的斜率。

对于一条直线 y = kx +b，k就是直线的斜率。

斜率的计算

对于一条已知的线段，求斜率θ，使用反正切函数

θ=arctan((y2-y1) / (x2-x1))

在JavaScript中对应的API是 Math.atan2(y, x)

atan2 方法返回一个 -PI到 PI 之间的数值，表示点 (x, y) 对应的偏移角度。这是一个逆时针角度，以弧度为单位，正X轴和点 (x, y) 与原点连线 之间。注意此函数接受的参数：先传递 y 坐标，然后是 x 坐标。

直线上任意一点坐标的计算

实现思路

  1. 获取直线的总长度
  2. 计算直线上共有多少个虚线段
  3. 循环计算虚线段的起始点，并绘制

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Drawing Lines with Rubber Bands</title>

    <style>

     body {

         background: #eeeeee;

     }

     #canvas {

        background: #ffffff;

        cursor: pointer;

        margin-left: 10px;

        margin-top: 10px;

        -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,.5);

        -moz-box-shadow: 4px 4px 8px rgba(0,0,0,.5);

        box-shadow: 4px 4px 8px rgba(0,0,0,.5);

     }

    </style>

</head>

<body>

    <canvas id="canvas" width="600" height="600">

        Canvas not supported

    </canvas>

    <script src="./example.js"></script>

</body>

</html>


var canvas = document.getElementById('canvas'),

    context = canvas.getContext('2d');

// Functions ........................................................

function drawDashedLine(ctx, x1, y1, x2, y2, dashLength) {

    dashLength = dashLength || 5;

    var deltaX = x2 - x1;

    var deltaY = y2 - y1;

    // get the total length of the line

    var lineLength = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

    // calculate the angle of the line

    var lineangle = Math.atan2(y2 - y1, x2 - x1);

    // calculate the number of dashes

    var numDashes = Math.floor(lineLength / dashLength); // 向下取整

    for (var i = 0; i < numDashes; i++) {

        ctx.moveTo(x1 + i * dashLength * Math.cos(lineangle), y1 + i * dashLength * Math.sin(lineangle));

        ctx.lineTo(x1 + ((i + 1) * dashLength - 2) * Math.cos(lineangle), y1 + ((i + 1) * dashLength - 2) * Math.sin(lineangle));

        ctx.stroke();

    }

}

context.lineWidth = 2;

context.strokeStyle = 'blue';

drawDashedLine(context, 20, 20, canvas.width - 20, 20, 10);

drawDashedLine(context, canvas.width - 20, 20, canvas.width - 20, canvas.height - 20, 10);

drawDashedLine(context, 20, 20, 20, canvas.height - 20, 10);

drawDashedLine(context, 20, canvas.height - 20, canvas.width - 20, canvas.height - 20, 10);

drawDashedLine(context, 20, 20, canvas.width - 20, canvas.height - 20, 10);

drawDashedLine(context, canvas.width - 20, 20, 20, canvas.height - 20, 10);

实现效果：

Canvas入门07- 自定义实现虚线的绘制的更多相关文章

  1. Canvas入门（3）:图像处理和绘制文字

    来源:http://www.ido321.com/997.html 一.图像处理(非特别说明,所有结果均来自最新版Google) 在HTML 5中,不仅可以使用Canvas API绘制图形,也可以用于 ...

  2. Canvas入门（2）:图形渐变和图像形变换

    来源:http://www.ido321.com/986.html 一.图形渐变(均在最新版Google中测试) 1.绘制线性渐变 1: // 获取canvas 的ID 2: var canvas = ...

  3. Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形

    来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块“画布”,一块无色 ...

  4. Android显示框架：自定义View实践之绘制篇

    文章目录 一 View 二 Paint 2.1 颜色处理 2.2 文字处理 2.3 特殊处理 三 Canvas 3.1 界面绘制 3.2 范围裁切 3.3 集合变换 四 Path 4.1 添加图形 4 ...

  5. 自定义View(2)canas绘制基本图形的示例

    效果 代码: void drawSample(Canvas canvas) { /* * 方法 说明 drawRect 绘制矩形 drawCircle 绘制圆形 drawOval 绘制椭圆 drawP ...

  6. HTML5 canvas入门

    HTML5 Canvas入门 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. ...

  7. canvas入门之时钟的实现

    canvas 入门之作: 三步实现一个时钟: 直接上效果:   step 1  : 背景制作首先制作从1-12的数字: var canvas = document.getElementById('ca ...

  8. Canvas入门到高级详解(上)

    神奇的 canvas--AICODER 全栈培训 IT 培训专家 一.canvas 简介 1.1 什么是 canvas?(了解) 是 HTML5 提供的一种新标签 <canvas>< ...

  9. Canvas 入门案例

    五.  Canvas 入门案例 1.  canvas 圆形绘制 <!DOCTYPE html> <html lang="en"> <head> ...

  10. Android 虚线实现绘制 - DashPathEffect

    前言: 通过view绘制虚实线,采用Android自带API--DashPathEffect.具体使用请参考更多的链接,这里只是讲解. 构造函数 DashPathEffect 的构造函数有两个参数: ...

随机推荐

  1. Jmeter启动jmeter-server.bat 报java.io.FileNotFoundException:rmi_keystore.jks 解决方法

    解决方法:1.找到apache-jmeter-5.0\bin\jmeter.properties 2.修改server.rmi.ssl.disable=true (记得去除server.rmi.ssl ...

  2. 图片转base64的几种场景(网络图片，本地图片，用户上传图片)

    转载于博客园 https://www.cnblogs.com/zhangdiIT/p/7895903.html 写的很棒  推荐给大家 场景一:将用户本地上传的资源转化,即用户通过浏览器点击文件上传时 ...

  3. Codeforces Gym 101505C : Cable Connection （计算几何）

    题目链接 题意:给出第一象限的N个点,存在一直线x/a+y/b=1(a>0,y>0)使得所有点都在这条直线下面,求 min{sqrt(a^2+b^2)} 显然,这样的直线必然经过这N个点中 ...

  4. jvm——CMS 垃圾回收器（未完）

    https://matt33.com/2018/07/28/jvm-cms/ 阶段1:Initial Mark stop-the-wolrd 标记那些直接被 GC root 引用或者被年轻代存活对象所 ...

  5. 通过页面名字调用页面并添加到tab控件中

    /// <summary> /// 动态 显示 tab /// </summary> /// <param name="sFromName">类 ...

  6. css-select的三角在不同浏览器的样式是不一样的，所以我们这样解决？？？

    select{ width:57px; height:23px; border:1px solid #e9e9e9; outline: none; appearance: none; -moz-app ...

  7. PROP_ENTRY_TYPE用法

    最近几天刚换了vs2019,然后各种水土不服 这不 刚建了一个ATL组件,发现添加了属性编译不过,提示: 错误 C4995 “PROP_ENTRY”: 名称被标记为 #pragma deprecate ...

  8. 使用Eigen遇到恶心报错

    参考博客:https://www.cnblogs.com/wongyi/p/8734346.html 1. 数据类型报错 /home/wy/workdir/slambook/ch3/useEigen/ ...

  9. scrapy项目2：爬取智联招聘的金融类高端岗位（spider类）

    ---恢复内容开始--- 今天我们来爬取一下智联招聘上金融行业薪酬在50-100万的职位. 第一步:解析解析网页 当我们依次点击下边的索引页面是,发现url的规律如下: 第1页:http://www. ...

  10. python3.x使用cxfreeze将.p打包成.exe

    之前写了一个使用ffplay批量查看格式为h264的图片,每次抽帧后都要打开pycharm编译器来运行程序,然后才能正常查看图片,或者在其他没有安装python环境的电脑中运行,很不方便.为此,在网上 ...