最近做一个项目,需要最近绘画一个箭头,其实用Canvas绘画很简单,但是箭头涉及到八个方向,上、下、左、右都很简单,斜方向的箭头就会有一个角度换算的问题,算法稍微有点复杂,所以做下笔记,供参考;
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{padding: 0; margin: 0; color: #999999;list-style: none;}
.quickConnectScreen{width: 100%;}
.netPort{width: 100%; overflow: hidden; margin-bottom: 30px;}
.netPort>ul.netPort-ul>li{padding: 5px; list-style: none;float: left;}
.netPort>ul.netPort-ul>li button{padding: 8px 18px; font-size: 16px; color: #ffffff;border: none;}
.ruler{position: relative; margin-left: 50px; }
.ruler .port-block .direction{width: 100%; height: 100%;}
.ruler .port-block.border{border: 2px solid #cccccc}
.ruler .port-list{margin-top: 25px; margin-left: 25px; overflow: hidden; float: left;}
.ruler .ruler-h{ height: 27px; background: url("img/ruler-h.png"); position: absolute; z-index: -1; left: 24px;}
.ruler .ruler-z{ width: 27px; background: url("img/ruler-z.png"); position: absolute; z-index: -1; top:24px;}
.ruler .ruler-h ul{margin-top: -18px; margin-left: -5px;}
.ruler .ruler-h ul li{float: left; width: 40px;}
.ruler .ruler-z ul{margin-top: -8px; margin-left: -25px;}
.ruler .ruler-z ul li{list-style: none;height: 40px;}
.unitConversion{height: 60px; padding-left: 15px; line-height: 30px;}
.unitConversion span{display: inline-block; float: left; }
.unitConversion ul{float: left; border: 1px solid #b6b6b6; }
.unitConversion ul li{float: left; width: 60px; height: 30px; text-align: center; cursor: pointer; }
.unitConversion ul li.active{background: #4f99c6; color: #ffffff; }
</style>
</head>
<body>
<div class="quickConnectScreen">
<div class="netPort">
<ul class="netPort-ul">
</ul>
</div>
<div class="unitConversion">
<span>选择单位: </span>
<ul>
<li class="active" οnclick="initRuler(info[0].ruler[0],10)">像素</li>
<li οnclick="initRuler(info[0].ruler[0],1)">箱体</li>
<