预备知识

直线的斜率

一条直线与某平面直角坐标系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. python 字符串方法及列表，元组，字典(一)

    字符串 str 注: 若想要保持单引号和双引号为字符串的一部分 1)单双引号交替使用, 2)使用转义字符\ 3)成对三个引号被存在变量里 二.字符串详细用法 字符串的单个取值例 p_1=”hello” ...

  2. 【CF461B】Appleman and Tree

    题目大意:给定一棵 N 个节点的有根树,1 号节点为根节点,每个点有两种颜色(黑.白),现给出树上每个节点的颜色,求有多少种分割树的方式,使得分割出的每个联通块中有且仅有一个黑点. 题解:树形dp 由 ...

  3. event对象中offsetX,clientX,pageX,screenX的区别

    1.offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border.2.clientX事件对象相对于浏览器窗口可视区域的X,Y坐 ...

  4. 转 弹性反向传播(RProp)和均方根反向传播(RMSProp)

    from http://blog.csdn.net/tsq292978891/article/details/78619384 都是一种权值更新算法,类似于SGD算法,其中,RMSProp是RProp ...

  5. 对 Promises/A+ 规范的研究 ------引用

    作为 Modern JavaScript 基础设施的一部分,Promises 对前端开发者而言异常重要.它是 async/await 语法的基础,是 JavaScript 中处理异步的标准形式.并且, ...

  6. break continue exit return 的区别

    [root@localhost day1]# cat ss.sh #!/bin/bash for ((i=0;i<5;i++)) do if [ $i -eq 3 ] then break #c ...

  7. anaconda 安装caffe,cntk,theano-未整理

    一,anancona 安装 https://repo.anaconda.com/archive/ conda create -n caffe_gpu -c defaults python=3.6 ca ...

  8. js 页面 保持状态 的方法

    A -> B 带参数进去B页面, 刷新B页面还  保持状态 单机下一页, 改变请求参数, A->B 不带参数进去B页面 (不存在)当前状态保存在cookies中, 刷新页面,判断cooki ...

  9. XML 验证器

    XML 错误会终止您的程序 XML 文档中的错误会终止你的 XML 程序. W3C 的 XML 规范声明:如果 XML 文档存在错误,那么程序就不应当继续处理这个文档.理由是,XML 软件应当轻巧,快 ...

  10. 消息队列之--Kafak

    序言 消息丢失如何解决? 解耦 异步 并行 Docker安装Kafak 1.下载镜像 # zookeeper镜像 docker pull wurstmeister/zookeeper # kafka镜 ...