预备知识

直线的斜率

一条直线与某平面直角坐标系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. Softmax函数与交叉熵

    在Logistic regression二分类问题中,我们可以使用sigmoid函数将输入Wx+b映射到(0,1)区间中,从而得到属于某个类别的概率.将这个问题进行泛化,推广到多分类问题中,我们可以使 ...

  2. HDU-3605-Escape(最大流, 状态压缩)

    链接: https://vjudge.net/problem/HDU-3605 题意: 2012 If this is the end of the world how to do? I do not ...

  3. ESP8266网络介绍

    仔细分析上图,根据功能区分,可以分为: Arduino功能,把ESP8266 当做 Arduino来使用 SD —— SD卡库 Servo —— 伺服电机库 Wire —— I2C库 SPI —— s ...

  4. react项目导出数据怎么做？

    做项目遇到导出数据,搜索了一个插件,简直太好用,几行代码就可以搞定. 插件是react-csv, 了解详细介绍大家可以去https://www.npmjs.com/package/react-csv

  5. C# 泛型 new{ }??? //加new 和不加new 有什么不同? new() 约束

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. UVa 11235 Frequent values (RMQ && 区间出现最多次的数的次数)

    题意 : 给出一个长度为 n 的不降序序列,并且给出 q 个形如(L, R)的问询,问你这个区间出现的最多次的数的次数. 分析 : 很自然的想到将区间“缩小”,例如1 1 2 3 3 3就可以变成2 ...

  7. CDOJ 1057 秋实大哥与花 线段树 区间更新+区间查询

    链接: I - 秋实大哥与花 Time Limit:1000MS     Memory Limit:65535KB     64bit IO Format:%lld & %llu Submit ...

  8. Jmeter性能测试一

    用jmeter进行压力测试,在网上看到一个简单的例子.按步骤做,在jmeter中执行时,结果中error一直为100%.通过在代码中加入打印语句,才找出代码中的一处错误.下面po上的代码中已将错误修改 ...

  9. sql中left join、right join、inner join的区别

    转自https://www.cnblogs.com/pcjim/articles/799302.html left  join.right join.inner join区别 left join(左联 ...

  10. sock( ) bind( ) connect( )

    Linux下的socket()函数 调用头文件<sys/socket.h>中的socket函数 int socket(int af, int type, int protocol); 1) ...