预备知识

直线的斜率

一条直线与某平面直角坐标系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实现学生信息系统

    要求:不能重名 ''' 一.需求:进入系统显示系统功能界面,功能如下: 1.添加学员 2.删除学员 3.修改学员信息 4.查询学员信息 5.显示所有学员信息 6.退出功能 ''' # 定义功能界面函数 ...

  2. Java并发编程实战 第10章 避免活跃性危险

    死锁 经典的死锁:哲学家进餐问题.5个哲学家 5个筷子 如果没有哲学家都占了一个筷子 互相等待筷子 陷入死锁 数据库设计系统中一般有死锁检测,通过在表示等待关系的有向图中搜索循环来实现. JVM没有死 ...

  3. mapper映射文件配置之select、resultMap（转载）

    原文地址:http://www.cnblogs.com/dongying/p/4073259.html 先看select的配置吧: <select         <!-- 1. id ( ...

  4. python之路day14--列表生成式、生成器generator、生成器并行

    列表生成式 列表生成式阅读量: 44   现在有个需求,现有列表a=[0, 1, 2, 3, 4, 5, 6, 7, 8, 9],要求你把列表里的每个值加1,你怎么实现?你可能会想到2种方式 二逼青年 ...

  5. Codecombat 游戏攻略（计算机科学三）2

    第33关 逻辑之路 判断secretB 非真,走上面:否则,走下面(这里面要先自己进行逻辑判断)if…else语句或者这样用(不用自己进行判断) // 如果 secretB 非真,走上面:否则,走下面 ...

  6. 2. ClustrixDB 文件/参数说明

    一.日志/data/clustrix/log/query.log 记录节点慢SQL/错误SQL/DDL 等信息,节点分开记录 Each entry in the query.log is catego ...

  7. AOP 相关包

    aop 命名空间,jar 扫路径

  8. 创建一个简单的 Springboot web项目

    1.点击Project 2.点击 Next 3.项目名 4.web 项目 4.确认 5.pom.xml <?xml version="1.0" encoding=" ...

  9. VirtualBox NAT Host-only模式下，自动分配IP上网。

    修改宿主机上,virtualbox自建虚拟网卡Host-Only 2. 因为我使用了两个适配器,所以这两个适配器的名字分别是ifcfg-eth0, ifcfg-eth1. ifcfg-eh0一般默认就 ...

  10. python学习之路（24）

    访问限制 在Class内部,可以有属性和方法,而外部代码可以通过直接调用实例变量的方法来操作数据,这样,就隐藏了内部的复杂逻辑. 但是,从前面Student类的定义来看,外部代码还是可以自由地修改一个 ...