用H5 Canvas 绘画箭头

最新推荐文章于 2022-11-24 10:23:12 发布

丹丹无敌

最新推荐文章于 2022-11-24 10:23:12 发布

阅读量5.8k

点赞数 1

文章标签： html canvas 算法

本文链接：https://blog.csdn.net/u014230393/article/details/53406040

版权

最近做一个项目，需要最近绘画一个箭头，其实用Canvas绘画很简单，但是箭头涉及到八个方向，上、下、左、右都很简单，斜方向的箭头就会有一个角度换算的问题，算法稍微有点复杂，所以做下笔记，供参考；html： Title ul{padding: 0; margin: 0; color: #999999;list-style: none;}

摘要由CSDN通过智能技术生成

最近做一个项目，需要最近绘画一个箭头，其实用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>
        <

最低0.47元/天解锁文章

丹丹无敌

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用H5 Canvas 绘画箭头

最近做一个项目，需要最近绘画一个箭头，其实用Canvas绘画很简单，但是箭头涉及到八个方向，上、下、左、右都很简单，斜方向的箭头就会有一个角度换算的问题，算法稍微有点复杂，所以做下笔记，供参考；html： Title ul{padding: 0; margin: 0; color: #999999;list-style: none;}
复制链接

扫一扫