随笔- 310  文章- 1  评论- 0  阅读- 85860 
canvas绘制箭头
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
<head>
    <title>箭头</title>
    <meta charset="utf-8">
</head>
 
<body style="">
    <canvas id="'myCanvas" width="1500" height="2000" ></canvas>
</body>
 
<script type="text/javascript">
    var canvas = document.getElementById("'myCanvas");
    var ctx = canvas.getContext("2d");
    function drawArrow(ctx, fromX, fromY, toX, toY) {
        // 保存画笔状态
        ctx.save();
        // 设置箭头样式
        ctx.lineWidth = 2;
        ctx.strokeStyle="#000000";
        ctx.fillStyle="#FF0000";
        ctx.lineCap="round";
        ctx.lineJoin="round";
        ctx.shadowBlur=2;
        ctx.shadowColor= "rgba(0, 0, 0, 0.5)";
 
        // 计算向量及其长度
        var dx = toX - fromX;
        var dy = toY - fromY;
        var distance = Math.sqrt(dx*dx + dy*dy);
 
        // 计算箭头头部的终点坐标
        var headX = toX - dx / distance * 10;
        var headY = toY - dy / distance * 10;
 
        // 绘制箭身
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(headX, headY);
        ctx.stroke();
 
        // 绘制箭头头部
        ctx.beginPath();
        ctx.moveTo(toX, toY);
        ctx.lineTo(headX - dy / distance * 5, headY + dx / distance * 5);
        ctx.lineTo(headX + dy / distance * 5, headY - dx / distance * 5);
        ctx.closePath();
        ctx.fill();
 
        // 恢复画笔状态
        ctx.restore();
    }
     
    drawArrow(ctx, 50, 50, 150, 150);
 
    </script>
 
</html>

　　

 posted on   boye169  阅读(385)  评论(0)  编辑  收藏  举报
相关博文：
· html canvas画图
· echart 双坐标 柱状图-折线图
· canvas画箭头封装，直接调用
· 新学到了一个做箭头图标的方法，用起来
· 使用css绘制箭头
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
历史上的今天：
2022-10-11 php 新建对象
2022-10-11 mysql alter
2022-10-11 json 格式化输出
点击右上角即可分享
微信分享提示