预备知识

直线的斜率

一条直线与某平面直角坐标系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. 【HDU5289】Assignment

    题目大意:给定一个长度为 N 的序列,求序列中最大值和最小值相差小于 K 的连续段的个数. 题解: 最大值和最小值相差不超过 K 是一个在值域角度的限制,应考虑采用平衡树或权值...数据结构进行维护. ...

  2. SpringMVC 向页面传值-Map、Model和ModelMap

    除了使用ModelAndView方式外.还可以使用Map.Model和ModelMap来向前台页面传值 使用后面3种方式,都是在方法参数中,指定一个该类型的参数.例如: Java代码 @Request ...

  3. 详解WebService开发中四个常见问题(1)

    详解WebService开发中四个常见问题(1)   WebService开发中经常会碰到诸如WebService与方法重载.循环引用.数据被穿该等等问题.本文会给大家一些很好的解决方法. AD:WO ...

  4. Struts 2 配置Action详解_java - JAVA

    文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 实现了Action处理类之后,就可以在struts.xml中配置该Action,从而让Struts 2框架知道哪个Act ...

  5. spark读取kafka数据 createStream和createDirectStream的区别

    1.KafkaUtils.createDstream 构造函数为KafkaUtils.createDstream(ssc, [zk], [consumer group id], [per-topic, ...

  6. vs2017 制作winfrom 安装包！

    https://www.cnblogs.com/GuZhenYin/p/8176981.html 转载 前言 项目中有用到winfrom做配套的打印程序,直接给客户一个debug文件夹,当然不是很好. ...

  7. linux下部署nginx服务

    1.安装依赖包  yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 2.下载并解压安装包  cd /usr/loc ...

  8. Linux的解压缩相关命令

    Linux的解压缩相关命令 知识点: 1.zip命令 2.tar命令 3.压缩和解压常用组合

  9. python-套接字编程之udp

    使用udp协议 服务端: #!/usr/bin/python3 # coding:utf-8 # Auther:AlphaPanda # Description:UDP服务端 # Version:1 ...

  10. 【webpack4】webpack4配置需要注意的问题

    需要注意的知识: 要全局安装webpack以及webpack cli,否则不能使用webpack指令 npm install webpack -g npm install webpack-cli -g ...