7、跟随鼠标移动的箭头 - 匀速运动

最新推荐文章于 2021-06-04 08:34:56 发布

奇遇世界

最新推荐文章于 2021-06-04 08:34:56 发布

阅读量653

点赞数

本文链接：https://blog.csdn.net/late_in_autumn/article/details/90812775

版权

利用canvas绘制一个箭头 arrow，令箭头时刻朝向鼠标所在的方向，并缓慢向鼠标方向移动。

1、求出鼠标所在位置与箭头所在位置的 x、y 坐标轴的距离：

dx = mouse.x - arrow.x;

dy = mouse.y - arrow.y;

2、利用 atan2 反正切函数，求出鼠标与箭头所连成的直线的角度：

angle = Math.atan2(dy, dx);

3、让箭头依此角度旋转，使箭头朝向鼠标所在位置的方向：

arrow.rotation = angle;

4、已知箭头的速度speed，求出箭头在x、y轴上的速度向量：

vx = Math.cos(angle) * speed;

vy = Math.sin(angle) * speed;

5、将求得的 vx、vy 和箭头的 x、y坐标相加，实现箭头的移动

arrow.x += vx;

arrow.y += vy;

完整实现代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width">
    <title></title>
    <style>
        *{margin: 0;padding: 0}
        body {
            background-color: #eee
        }
        canvas {
            background-color: #fff
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="400">
        Your browser does not support HTML5 Canvas.
    </canvas>

    <script>
        (function(){
            window.addEventListener("load", eventWindowLoaded, false);
            function eventWindowLoaded(){
                canvasApp();
            }
            function canvasSupport(e){
                return !!e.getContext;
            }
            function canvasApp(){
                let canvas = document.getElementById("canvas");
                if(!canvasSupport(canvas)){
                    return ;
                }
                // start
                let context = canvas.getContext("2d");
                drawScreen(canvas, context);
            }

            // write your codes
            function drawScreen(canvas, context){
                let arrow = new Arrow();
                let mouse = captureMouse(canvas);
                let speed = 3;
                
                let dx = 0;
                let dy = 0;
                let angle = 0;
                let vx = 0;
                let vy = 0;

                arrow.x = canvas.width / 2;
                arrow.y = canvas.height / 2;

                (function drawFrame() {
                    window.requestAnimationFrame(drawFrame, canvas);
                    context.clearRect(0, 0, canvas.width, canvas.height);

                    dx = mouse.x - arrow.x;
                    dy = mouse.y - arrow.y;
                    angle = Math.atan2(dy, dx);
                    vx = Math.cos(angle) * speed;
                    vy = Math.sin(angle) * speed;
                    
                    arrow.rotation = angle;
                    arrow.x += vx;
                    arrow.y += vy;

                    arrow.draw(context);
                } ())
            }
        })();
    </script>
    <script>
        function Arrow(rotation) {
            this.x = 0;
            this.y = 0;
            this.color = "#00ff00";
            this.rotation = 0;
        }

        Arrow.prototype.draw = function(context) {
            context.save();

            context.translate(this.x, this.y);
            context.rotate(this.rotation);
            context.fillStyle = this.color;

            context.beginPath();
            context.moveTo(-50, 25);
            context.lineTo(0, 25);
            context.lineTo(0, 50);
            context.lineTo(50, 0);
            context.lineTo(0, -50);
            context.lineTo(0, -25);
            context.lineTo(-50, -25);
            context.closePath();
            context.fill();

            context.restore();
        }
    </script>
    <script>
        // 获取鼠标的位置坐标
        function captureMouse(element){
            var mouse = {x: 0, y: 0, event: null},
            body_scrollLeft = document.body.scrollLeft,
            body_scrollTop = document.body.scrollTop,
            element_scrollLeft = document.documentElement.scrollLeft,
            element_scrollTop = document.documentElement.scrollTop,
            offsetLeft = element.offsetLeft,
            offsetTop = element.offsetTop;
  
            element.addEventListener("mousemove", function(){
                var x, y;

                if(event.pageX || event.pageY){
                    x = event.pageX;
                    y = event.pageY;
                }else{
                    x = event.clientX + body_scrollLeft + element_scrollLeft;
                    y = event.clientY + body_scrollTop + element_scrollTop;
                }
                x -= offsetLeft;
                y -= offsetTop;

                mouse.x = x;
                mouse.y = y;
                mouse.event = event;
            }, false);

            return mouse;
        };
    </script>
</body>
</html>

奇遇世界

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7、跟随鼠标移动的箭头 - 匀速运动

利用canvas绘制一个箭头 arrow，令箭头时刻朝向鼠标所在的方向，并缓慢向鼠标方向移动。1、求出鼠标所在位置与箭头所在位置的 x、y 坐标轴的距离： dx = mouse.x - arrow.x; dy = mouse.y - arrow.y;2、利用 atan2 反正切函数，求出鼠标与箭头所连成的直线的角度： angle = Math.a...
复制链接

扫一扫