canvas实现虚线带箭头效果

<canvas id="canvas"/>

// startX, startY：起点坐标
// finalX, finalY：终点坐标
// theta：三角斜边与直线夹角
// headlen：三角斜边长度
// width：箭头线宽度
// color：箭头颜色

const   getArrow=( startX, startY, finalX, finalY,theta=30,headlen=10,width=1,color="#000")=>{var idName = document.getElementById("canvas");var ctx = idName.getContext("2d");// 计算各角度和对应坐标var angle = Math.atan2(startY - finalY, startX - finalX) * 180 / Math.PI,angle1 = (angle + theta) * Math.PI / 180,angle2 = (angle - theta) * Math.PI / 180,topX = headlen * Math.cos(angle1),topY = headlen * Math.sin(angle1),botX = headlen * Math.cos(angle2),botY = headlen * Math.sin(angle2);ctx.save();var arrowX ,arrowY ;//绘制箭头ctx.beginPath();arrowX = finalX + topX;arrowY = finalY + topY;ctx.moveTo(arrowX, arrowY);ctx.lineTo(finalX, finalY);arrowX = finalX + botX;arrowY = finalY + botY;ctx.lineTo(arrowX, arrowY);ctx.strokeStyle = color;ctx.lineWidth = width;ctx.stroke();ctx.closePath();arrowX = startX - topX;arrowY = startY - topY;//绘制虚线ctx.beginPath();ctx.setLineDash([28, 8]);//实线 去掉此句ctx.moveTo(arrowX, arrowY);ctx.moveTo(startX, startY);ctx.lineTo(finalX, finalY);ctx.stroke();ctx.restore();}

canvas实现虚线带箭头效果相关推荐

Leaflet 带箭头轨迹以及沿轨迹带方向的动态marker
前面写了篇文章,mapboxgl实现带箭头轨迹线,介绍了如何基于mapboxgl实现类似高德地图导航轨迹效果. 近期有基于Leaflet实现轨迹回放的需求,于是研究了下如何基于leaflet来实现. ...
vue项目中画出优雅的线条（虚线、直线、折线、带箭头、流动效果等）
需求:运行监控图模块,模块之间用虚线或者实线连接,且带有箭头实现方法: 1.canvas绘制 2.echarts专业的表格软件(画带箭头的虚线有难度) 3.svg方法 4.leader-line插件 ...
html5画直线箭头,HTML5 canvas画带箭头的虚线
今天给大家讲解的是在HTML5 canvas画带箭头的虚线.关于Canvas 对象表示一个 HTML 画布元素 -.它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作. 本案例注意事项 ...
Android Canvas绘制带箭头的直线
先看下效果图: 下面我们直接看代码我自定义了一个View,代码如下: package com.davis.drawtrangle;import android.content.Context; im ...
Canvas 教程：如何绘制带箭头的曲线
这篇文章要解决一个问题,就是给定 HTML 中任意一个点(起点)和另一个点(终点),绘制一条带箭头的曲线. 废话不多说,直奔主题. 我们只有两个点的相对偏移量(offset),思路就是以这两个点作为对 ...
delphi 画带箭头的线
unit Unit1;interfaceusesWindows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,Di ...
popover带箭头弹框
我们先来看一下效果吧: 分析:这个带箭头的弹框其实是一个控制器,通过Modal方式展现,但跟传统模态方式效果不一样,我们一眼就能看出. Xib方式实现popover: 1.segue的时候选择Pres ...
Android自定义文件路径箭头,Android自定义ViewGroup实现带箭头的圆角矩形菜单
本文和大家一起做一个带箭头的圆角矩形菜单,大概长下面这个样子: 要求顶上的箭头要对准菜单锚点,菜单项按压反色,菜单背景色和按压色可配置. 最简单的做法就是让UX给个三角形的图片往上一贴,但是转念一想这 ...
android 自定义进度条水量,Android自定义带水滴的进度条样式（带渐变色效果）...
一.直接看效果二.直接上代码 1.自定义控件部分 package com.susan.project.myapplication; import android.app.Activity; impo ...
s时钟画布 android,Canvas画布实现自定义时钟效果
标题 *{margin:0; padding:0; list-style:none;} .box{ width: 420px; height: 420px; margin: 50px auto 0; ...

canvas实现虚线带箭头效果

canvas实现虚线带箭头效果相关推荐

最新文章

热门文章