Canvas入门07- 自定义实现虚线的绘制
预备知识
直线的斜率
一条直线与某平面直角坐标系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 坐标。
直线上任意一点坐标的计算
实现思路
- 获取直线的总长度
- 计算直线上共有多少个虚线段
- 循环计算虚线段的起始点,并绘制
<!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- 自定义实现虚线的绘制的更多相关文章
- Canvas入门(3):图像处理和绘制文字
来源:http://www.ido321.com/997.html 一.图像处理(非特别说明,所有结果均来自最新版Google) 在HTML 5中,不仅可以使用Canvas API绘制图形,也可以用于 ...
- Canvas入门(2):图形渐变和图像形变换
来源:http://www.ido321.com/986.html 一.图形渐变(均在最新版Google中测试) 1.绘制线性渐变 1: // 获取canvas 的ID 2: var canvas = ...
- Canvas入门(1):绘制矩形、圆、直线、曲线等基本图形
来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块“画布”,一块无色 ...
- Android显示框架:自定义View实践之绘制篇
文章目录 一 View 二 Paint 2.1 颜色处理 2.2 文字处理 2.3 特殊处理 三 Canvas 3.1 界面绘制 3.2 范围裁切 3.3 集合变换 四 Path 4.1 添加图形 4 ...
- 自定义View(2)canas绘制基本图形的示例
效果 代码: void drawSample(Canvas canvas) { /* * 方法 说明 drawRect 绘制矩形 drawCircle 绘制圆形 drawOval 绘制椭圆 drawP ...
- HTML5 canvas入门
HTML5 Canvas入门 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. ...
- canvas入门之时钟的实现
canvas 入门之作: 三步实现一个时钟: 直接上效果: step 1 : 背景制作首先制作从1-12的数字: var canvas = document.getElementById('ca ...
- Canvas入门到高级详解(上)
神奇的 canvas--AICODER 全栈培训 IT 培训专家 一.canvas 简介 1.1 什么是 canvas?(了解) 是 HTML5 提供的一种新标签 <canvas>< ...
- Canvas 入门案例
五. Canvas 入门案例 1. canvas 圆形绘制 <!DOCTYPE html> <html lang="en"> <head> ...
- Android 虚线实现绘制 - DashPathEffect
前言: 通过view绘制虚实线,采用Android自带API--DashPathEffect.具体使用请参考更多的链接,这里只是讲解. 构造函数 DashPathEffect 的构造函数有两个参数: ...
随机推荐
- python 文件夹压缩
import os import zipfile def zipDir(dirpath,outFullName): """ 压缩指定文件夹 :param dirpath: ...
- 【hiho1041】国庆出游 dfs+bitset
题目大意:给定一棵 N 个节点的有根树,1 号节点为根节点,现遍历整棵树,要求每条边仅被经过两次,问是否存在一种特定的遍历方式使得 dfs 序中节点的相对前后关系符合给定的顺序. 题解: 首先,由于要 ...
- 跨平台信息获取小工具第三版本(增加了继承、多线程、异常处理模块、excel表格内容剔除空格)
# coding=utf-8 import threadingimport paramikoimport osimport timeimport xlrdimport xlwtimport openp ...
- Python 字典(Dictionary)Ⅱ
删除字典元素 能删单一的元素也能清空字典,清空只需一项操作. 显示删除一个字典用del命令,如下实例: 但这会引发一个异常,因http://www.xuanhe.net/为用del后字典不再存在: 注 ...
- 对promise.all底层的实现的研究
1.Promise.all(iterable)返回一个新的Promise实例,此实例在iterable参数内素有的Promise都fulfilled或者参数中不包含Promise时,状态变成fulfi ...
- postman—随机数和Monitors
postman做重复测试时,随机数就有很大的作用,不用每次都输入 在postman的Params中,输入一个左大括号,会显示三种随机数: 也可以在body中设置 随机数如下: {{$guid}}:添加 ...
- 10. ClustrixDB 故障恢复管理
一.前端网络故障 如果节点无法在其前端以太网网络端口上进行通信,例如,由于意外的电缆拉拔.交换机配置错误或NIC故障,则不需要人工干预.集群采取以下行动: 没有将其他连接分配给失败的实例. 如果失败的 ...
- 在线PDF的实现 纯js
/// <summary> /// 使用微软的TransmitFile下载文件 /// </summary> /// <param name="filePath ...
- XML 文档包含 XML 元素。
XML 文档包含 XML 元素. 什么是 XML 元素? XML 元素指的是从(且包括)开始标签直到(且包括)结束标签的部分. 元素可包含其他元素.文本或者两者的混合物.元素也可以拥有属性. < ...
- 中南林业大学校赛 I 背包问题 ( 折半枚举 || 01背包递归写法 )
题目链接 题意 : 中文题 分析 : 价值和重量都太过于大,所以采用折半枚举的方法,详细可以看挑战的超大背包问题 由于 n <= 30 那么可以不必直接记录状态来优化,面对每个用例 直接采用递 ...