JS实现物体随鼠标旋转

首先，需要一个可旋转的对象，该对象包含使用 canvas 上下文在 canvas 上绘制一个箭头的功能。由于该箭头会重复使用，我们将其封装为一个类，将以下代码添加到 arrow.js 文件中，把该文件导入 HTML 主文件中：

function Arrow () {
    this.x = 0
    this.y = 0
    this.color = "#ffff00"
    this.rotation = 0
}

Arrow.prototype.draw = function (context) {  // 使用原型定义方法
    context.save()
    context.translate(this.x, this.y)   // 转换画布的坐标系，把箭头放在画布中间（画布为html元素）
    context.rotate(this.rotation)       // 传入角度，使画布旋转
    context.lineWidth = 2
    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.lineTo(-50, -25)
    context.closePath()                 // 结束箭头的绘制
    context.fill()
    context.stroke()
    context.restore()
}

draw(context) 方法根据传入的 canvas 上下文参数使用 canvas 绘图 API 绘制一个箭头。

我们已经定义好了一个箭头类，每当使用一个箭头对象时，只需调用 new Arrow（）方法即可。接下来，我们要找到鼠标在画布中所在的坐标

var utils = {}
utils.captureMouse = function (element) {
    var mouse = {x: 0, y: 0}
    element.addEventListener('mousemove', function (event){ 
        var x, y
  // 每个鼠标有以下两个属性获取鼠标当前位置,但有的浏览器不支持，所以进行以下判断
    if ( event.pageX || event.pageY) {
        x = event.pageX
        y = event.pageY
    } else {
        x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft
        y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop
    }
    x -= element.offsetLeft //防止偏移
    y -= element.offsetTop
   mouse.x = x              // 鼠标的x坐标
   mouse.y = y              // 鼠标的y坐标
}, false )
    return mouse       // 获得鼠标位置坐标
}

3.当我们获得了箭头中心位置和鼠标位置以后，就可以利用 Math.atan2(dy, dx) 方法获得偏移的角度

dx = mouse.x-arrow.x;

dy = mouse.y-arrow.y;

arrow.rotation = Math.atan2(dy, dx);

通过下图可以更好的理解

1571491933949

当然，需要一个循环才能实现动画，以下是 HTML 中的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script src="utils.js"></script>
    <script src="arrow.js"></script>
    <script>
      window.onload =  function () {
          var canvas = document.getElementById("canvas"),
              context = canvas.getContext('2d'),
              mouse = utils.captureMouse(canvas),
              arrow = new Arrow()
              
              arrow.x = canvas.width/2
              arrow.y = canvas.height/2;

              (function drawFrame () {
                  // window.requestAnimationFrame 接受一个回调函数作为参数
                  // 可以理解为对下面代码的不断循环调用
                  window.requestAnimationFrame(drawFrame, canvas)
                  
                  // 删除上一个箭头的形状，以免覆盖,可以注释掉查看效果
                  context.clearRect(0, 0, canvas.width, canvas.height)
                  var dx = mouse.x-arrow.x
                  var dy = mouse.y-arrow.y
                  arrow.rotation = Math.atan2(dy,dx)
                  arrow.draw(context)    // 删除旧的箭头后，从新绘制箭头
              }())

      }
    </script>
</body>
</html>

posted @ 2020-04-03 10:58 土狗一号阅读(783) 评论(0) 收藏举报

刷新页面返回顶部

土狗一号

JS实现物体随鼠标旋转

JS实现物体随鼠标旋转

公告