Question

我目前有一个画布，上面画了一个我使用自定义函数绘制的元素和onload函数我想知道如何通过跟随鼠标旋转这个画布，就像转动一个轮子一样。代码如下

＆＃13;

<!DOCTYPE html>
<html>
    
    <head>
        <title>Help</title>   
    </head>
    <body>
       
        <canvas id="MyCanvas" width="500" height="500"></canvas>
        <script>
            var ctx = document.getElementById("MyCanvas").getContext("2d");
                ctx.translate(250,250);
            function draw(){  
                ctx.arc(0,0,100,0,Math.PI*2,false);  // x, y, radius, start angle, end angle, false/true  
                ctx.stroke();
                ctx.beginPath();
                ctx.moveTo(-100,0);
                ctx.lineTo(100,0);
                ctx.moveTo(100,0);
                ctx.lineTo(60,-80);
                ctx.moveTo(60,-80);
                ctx.lineTo(-100,0);
                ctx.stroke();
            } 
            window.onload=draw;
        </script>
        
    </body>
</html>

＆＃13;

有谁知道这有可能我尝试了多种不同的功能。但是，他们似乎无能为力。非常感谢帮助。

编辑但有轻微问题

＆＃13;

<!DOCTYPE html>
<html>
    
    <head>
        <title>Help</title>   
    </head>
    
    <style>
    canvas{
         border: 2px solid black;
        }
    </style>
    
    <body>
       
        <canvas id="Canvas" height="300"></canvas>
        
        <script>
            const ctx = canvas.getContext("2d");
            
            const mouse = { x: 0, y: 0 };
            function mouseEvents(e) {
              const bounds = canvas.getBoundingClientRect();
              mouse.x = e.pageX - bounds.left - scrollX;
              mouse.y = e.pageY - bounds.top - scrollY;
            }
            document.addEventListener("mousemove", mouseEvents);

            
            function drawRotated(x, y, angle) {
              ctx.setTransform(1, 0, 0, 1, x, y);
              ctx.rotate(angle);
              ctx.beginPath();
              ctx.arc(0, 0, 100, 0, Math.PI * 2);
              ctx.moveTo(-100, 0);
              ctx.lineTo(100, 0);
              ctx.lineTo(60, -80);
              ctx.closePath();
              ctx.stroke();
            }

            
            function update(timer) {
              ctx.setTransform(1, 0, 0, 1, 0, 0); // reset transform
              ctx.clearRect(0, 0, 300, 300);

              
              var angle = Math.atan2(mouse.y - 150, mouse.x - 150);

              
              drawRotated(150, 150, angle);
              requestAnimationFrame(update);
            }
            requestAnimationFrame(update);
        </script>
        
    </body>
</html>

＆＃13;

Answer 1

您需要创建一个鼠标移动侦听器和一个动画循环。

在动画循环中获取鼠标位置并使用Math.atan2(获取从中心画布到鼠标的方向。

然后使用ctx.setTransform设置变换以缩放和定位设计旋转中心，然后使用ctx.rotate将变换旋转到指向计算的角度。

有关详细信息，请参阅代码段

const ctx = canvas.getContext("2d");
// create mouse event listener
const mouse = { x: 0, y: 0 };
function mouseEvents(e) {
  const bounds = canvas.getBoundingClientRect();
  mouse.x = e.pageX - bounds.left - scrollX;
  mouse.y = e.pageY - bounds.top - scrollY;
}
document.addEventListener("mousemove", mouseEvents);

// draw design at x,y and rotated by angle
function drawRotated(x, y, angle) {
  ctx.setTransform(1, 0, 0, 1, x, y);
  ctx.rotate(angle);
  ctx.beginPath();
  ctx.arc(0, 0, 100, 0, Math.PI * 2);
  ctx.moveTo(-100, 0);
  ctx.lineTo(100, 0);
  ctx.lineTo(60, -80);
  ctx.closePath();
  ctx.stroke();
}

// render loop called 60 times a second
function update(timer) {
  ctx.setTransform(1, 0, 0, 1, 0, 0); // reset transform
  ctx.clearRect(0, 0, 300, 300);

  // get angle from center to mouse
  var angle = Math.atan2(mouse.y - 150, mouse.x - 150);

  // draw rotated design
  drawRotated(150, 150, angle);
  requestAnimationFrame(update);
}
requestAnimationFrame(update);

canvas {
  border: 2px solid black;
}

<canvas id="canvas" height=300></canvas>

如果画布上已经绘制了某些东西，如何通过跟随鼠标来旋转画布

1 个答案: