Canvas箭头动画

忘是亡心i 2022-05-23 02:18 315阅读 0赞

先上效果图:

![20180606104834679][]  
代码

<!DOCTYPE html>
    <html>
    <head>
        <title>箭头动画</title>
    </head>
    <body>
        <canvas id="myCanvas">Your browser does not support HTML5 Canvas. </canvas>
    </body>
    </html>
    <script type="text/javascript">
        var myCanvas = document.getElementById("myCanvas");
        myCanvas.style.cssText = "position:absolute;left:0;top:0; border: 1px solid #ccc;"; // 画布样式
        myCanvas.width = 600;   // 画布的宽度
        myCanvas.height = 600;  // 画布的高度 
    
    
        // 画笔（绘图对象）
        var ctx = myCanvas.getContext('2d');
    
    
        var deg = 30;
        var hud = deg * (Math.PI / 180);
        var r = 100;        // 半径 (即两点距离)
        var p1 = {
            x: 300,         // X坐标
            y: 150          // y坐标
        }
        var p2 = {
            x: p1.x + Math.cos(hud) * r,   // X坐标
            y: p1.y - Math.sin(hud) * r    // y坐标    
        }
    
    
        // 动画效果
        var _index = 1;
        setInterval(function () {
            // 清空画布
            var BW = myCanvas.width;
            var BH = myCanvas.height;
            ctx.clearRect(0, 0, BW, BH);                // 清空画布
    
    
            // 用于参考倾斜度的直线
            ctx.strokeStyle = "red";
            ctx.beginPath()
            ctx.moveTo(p1.x, p1.y);
            ctx.lineTo(p2.x, p2.y);
            ctx.stroke();
            ctx.closePath();
    
    
            // 无效果
            arrowTo(ctx, p1, p2, { color: "blue" });
    
    
            // 高亮效果
            arrowTo(ctx, { x: 100, y: 150 }, { x: 250, y: 450 }, { activeIndex: _index });
            arrowTo(ctx, { x: 200, y: 250 }, { x: 450, y: 250 }, { activeIndex: _index });
            arrowTo(ctx, { x: 500, y: 50 }, { x: 450, y: 250 }, { activeIndex: _index });
            arrowTo(ctx, { x: 200, y: 250 }, { x: 200, y: 50 }, { activeIndex: _index });
    
    
            // 整体偏移效果
            var offset = (_index % 3) * 5;
            arrowTo(ctx, { x: 200, y: 400 }, { x: 500, y: 400 }, { offset: offset, color: "red", justifyAlign: false });
            arrowTo(ctx, { x: 500, y: 400 }, { x: 450, y: 580 }, { offset: offset, color: "red", justifyAlign: false });
            arrowTo(ctx, { x: 450, y: 580 }, { x: 160, y: 580 }, { offset: offset, color: "red", justifyAlign: false });
            arrowTo(ctx, { x: 160, y: 580 }, { x: 200, y: 400 }, { offset: offset, color: "red", justifyAlign: false });
    
    
            // 其他处理
            if (_index >= 50) {
                _index = 1
            }
            else {
                _index++;
            }
        }, 300);
    </script>
    
    
    <script type="text/javascript">
        // 画两点间箭头
        // ctx - 画布上下文（我理解成画笔）
        // p1 - 起点
        // p2 - 终点
        // arrowOptions -- 画箭头的选项
        function arrowTo(ctx, p1, p2, arrowOptions) {
            // 初始化参数
            var opts = {
                startOffset: 5,             // 起点的留空长度
                endOffset: 5,               // 终点的留空长度
                offset: 0,                  // 偏移位（模拟动画效果用, 使用时建议将justifyAlign设为false） 
                color: '#E6E6FA',           // 默认颜色 
                activeIndex: -1,            // 高亮箭头的索引, 超出回到一圈起始位置。(默认-1，不做高亮处理) 
                activeColor: "#00FF00",     // 高亮颜色(Highligh Color)
                stepLength: 10,             // 间隔(步长)
                justifyAlign: true,         // 两端对齐(两边撑满, 配合activeIndex > 0时使用) 
                arrowLength: 15,            // 箭头长度(柄到顶点)            
                arrowTheta: 25,             // 箭头两边的夹角（度数） 
                arrowHeadlen: 6,            // 箭头两边斜边长度 
                arrowLineWidth: 1,          // 画箭头的线宽度
                lineWidth: 1,               // 两点间的连丝宽度（>0时，有效）
            };
    
    
            if (arrowOptions !== undefined && arrowOptions !== null) {
                opts = Object.assign(opts, arrowOptions);
            }
    
    
            // 画连结两点的线
            if (opts.lineWidth > 0) {
                ctx.beginPath();
                ctx.moveTo(p1.x, p1.y);
                ctx.lineTo(p2.x, p2.y);
                //颜色，线宽
                ctx.strokeStyle = opts.color;
                ctx.lineWidth = opts.lineWidth;
                ctx.stroke();
                ctx.closePath();
            }
    
    
            // 计两点距离
            var len = Math.floor(Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2)));
    
    
            // 计算画多少个箭头(注意：最后一个箭头是不需要间隔(步长)，所以可用长度要加一个opts.stepLength)
            var loops = Math.floor((len - (opts.startOffset + opts.offset + opts.endOffset) + opts.stepLength) / (opts.arrowLength + opts.stepLength));
    
    
            // 两端对齐(两边撑满)，重算步长 
            if (opts.justifyAlign === true) {
                opts.stepLength = (len - (opts.startOffset + opts.offset + opts.endOffset) - (opts.arrowLength * loops)) / (loops - 1);
            }
    
    
            // 高亮箭头的索引, 超出回到一圈起始位置。(用于动画效果) 
            var highlightIndex = 0;               // 0 - 无动画效果                
            if (opts.activeIndex > 0) {
                if ((opts.activeIndex % loops) === 0) {
                    highlightIndex = loops;
                }
                else {
                    highlightIndex = opts.activeIndex % loops;
                }
            }
    
    
            var hudu = Math.atan2(p1.y - p2.y, p2.x - p1.x);    // 计算p1, p2两点的倾斜度（弧度）。(注意参数：p1.y - p2.y, p2.x - p1.x, 请勿搞错)
            var p0 = { x: p1.x, y: p1.y };                      // 原点坐标, 作为圆心。 (辅助计算箭头起点(柄)与顶点的坐标)
            var r;                                              // 半径。 (辅助计算箭头起点(柄)与顶点的坐标)
            var color;
            for (var i = 0; i < loops; i++) {
                // 箭头起点(柄)
                r = (opts.startOffset + opts.offset) + (opts.arrowLength + opts.stepLength) * i;     // 原点到箭头起点(柄)的半径
                p1 = {
                    x: p0.x + Math.cos(hudu) * r,
                    y: p0.y - Math.sin(hudu) * r
                };
    
    
                // 箭头终点（顶点）
                r = r + opts.arrowLength;                       // 原点到箭头顶点(柄)的半径
                p2 = {
                    x: p0.x + Math.cos(hudu) * r,
                    y: p0.y - Math.sin(hudu) * r
                };
    
    
                // 画一个箭头
                if (highlightIndex > 0 && i === (highlightIndex - 1)) {
                    color = opts.activeColor;       //高亮箭头（动画效果）
                }
                else {
                    color = opts.color;
                }
                drawArrow(ctx, p1, p2, opts.arrowTheta, opts.arrowHeadlen, opts.arrowLineWidth, color);
            }
        }
    
    
        // 画箭头
        // ctx - 画布上下文（我理解成画笔）
        // p1 - 起点
        // p2 - 终点
        // theta -- 夹角theta (是度数，不是弧度)
        // headlen -- 斜边长度
        // width -- 线宽
        // color -- 颜色
        function drawArrow(ctx, p1, p2, theta, headlen, width, color) {
            theta = (theta !== undefined && theta !== null) ? theta : 25;       //夹角(度数)
            headlen = (headlen !== undefined && headlen !== null) ? headlen : 6;   //斜边长度
            width = (width !== undefined && width !== null) ? width : 1;        //线宽
            color = (color !== undefined && color !== null) ? color : '#000';       //颜色
    
    
            var angle = Math.atan2(p1.y - p2.y, p1.x - p2.x) * 180 / Math.PI,   //倾斜度(度数)
                angle1 = (angle + theta) * Math.PI / 180,            //夹角1
                angle2 = (angle - theta) * Math.PI / 180,            //夹角2   
                topX = headlen * Math.cos(angle1),                   //箭头上面点, X偏移位
                topY = headlen * Math.sin(angle1),                   //箭头上面点, Y偏移位
                botX = headlen * Math.cos(angle2),                   //箭头下面点, X偏移位   
                botY = headlen * Math.sin(angle2);                   //箭头下面点, Y偏移位      
    
    
            ctx.save();
    
    
            ctx.beginPath();
    
    
            //连结两点的线
            ctx.moveTo(p1.x, p1.y);
            ctx.lineTo(p2.x, p2.y);
    
    
            //终点箭头的两侧
            var arrowX = p2.x + topX;
            var arrowY = p2.y + topY;
            ctx.moveTo(arrowX, arrowY);
            ctx.lineTo(p2.x, p2.y);           //终点
            arrowX = p2.x + botX;
            arrowY = p2.y + botY;
            ctx.lineTo(arrowX, arrowY);
    
    
            //颜色，线宽
            ctx.strokeStyle = color;
            ctx.lineWidth = width;
            ctx.stroke();
    
    
            ctx.restore();
        }
    
    
        // 为Object扩展assign方法（合拼多个对象的属性，返回一个新对象）
        if (!Object.assign) {
            Object.defineProperty(Object, "assign", {
                enumerable: false,
                configurable: true,
                writable: true,
                value: function (target, firstSource) {
                    "use strict";
                    if (target === undefined || target === null)
                        throw new TypeError("Cannot convert first argument to object");
                    var to = Object(target);
                    for (var i = 1; i < arguments.length; i++) {
                        var nextSource = arguments[i];
                        if (nextSource === undefined || nextSource === null) continue;
                        var keysArray = Object.keys(Object(nextSource));
                        for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
                            var nextKey = keysArray[nextIndex];
                            var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
                            if (desc !== undefined && desc.enumerable) to[nextKey] = nextSource[nextKey];
                        }
                    }
                    return to;
                }
            });
        }
    </script>

参考资料：  
**[根据两点坐标，计算连线与坐标轴间的夹角（弧度、角度）（整理）][Link 1]**

**[Canvas学习：绘制箭头][Canvas]**  
[利用setLineDash 和 lineDashOffset 实现跑马灯（流动）效果][setLineDash _ lineDashOffset]  
[角度与弧度互转][Link 2]

**角度与弧度互转**

[20180606104834679]: /images/20220523/f969ae24804c4aa8a291bec11a57e47f.png
[Link 1]: https://blog.csdn.net/chelen_jak/article/details/80518973
[Canvas]: https://blog.csdn.net/chelen_jak/article/details/80494378
[setLineDash _ lineDashOffset]: https://blog.csdn.net/chelen_jak/article/details/80452942
[Link 2]: https://blog.csdn.net/chelen_jak/article/details/80480390