如何使 JavaScript 画布元素随鼠标移动？

Posted 2023-05-08

【中文标题】如何使 JavaScript 画布元素随鼠标移动？

【英文标题】：How to make a JavaScript canvas element move with your mouse?

【发布时间】：2021-09-02 18:18:03

【问题描述】：

我已经知道如何使用 jQuery 来移动标题，而且我还可以在 javascript 画布上绘制东西。我现在想知道如何结合这两个原则来使我用鼠标绘制的蜜蜂移动？我已经在 Sublime Text 3 上尝试了我的版本（我使用的是 Windows 7 专业硬件和软件，所以当我尝试下载 Sublime Text 4 时收到一条错误消息，顺便说一句）。这是我在JavaScript/html/CSS 中的版本：

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var x = 100;
    var y = 100;
    var circle = function (x, y, radius, fillCircle) 
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2, false);
        if (fillCircle) 
            ctx.fill();
         else 
            ctx.stroke();
        
    ;

    var drawBee = function (x, y) 
    ctx.lineWidth = 2;
    ctx.strokeStyle = "Black";
    ctx.fillStyle = "Gold";
    circle(x, y, 8, true);
    circle(x, y, 8, false);
    circle(x - 5, y - 11, 5, false);
    circle(x + 5, y - 11, 5, false);
;
drawBee();
var update = $("html").mousemove(function (event) 
    $(drawBee()).offset(
        left: event.pageX,
        top: event.pageY
    );
);

setInterval(function () 
        ctx.clearRect(0, 0, 500, 500);
        drawBee(x, y);
        ctx.strokeRect(0, 0, 500, 500);
    , 30);

<canvas id="canvas"  ></canvas>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>

请给我一个新代码添加到<script>标签中（用于将JavaScript添加到HTML文档中），并告诉我我的错误，以供将来参考。

提前致谢！

【问题讨论】：

改变画布的偏移量，而不是蜜蜂

【参考方案1】：

如果您需要跟随鼠标位置在画布内移动，请使用$("#canvas").mousemove() 和clientX/clientY 坐标（相对于画布）

var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var x = 100;
    var y = 100;
    var circle = function (x, y, radius, fillCircle) 
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2, false);
        if (fillCircle) 
            ctx.fill();
         else 
            ctx.stroke();
        
    ;

    var drawBee = function (x, y) 
    ctx.lineWidth = 2;
    ctx.strokeStyle = "Black";
    ctx.fillStyle = "Gold";
    circle(x, y, 8, true);
    circle(x, y, 8, false);
    circle(x - 5, y - 11, 5, false);
    circle(x + 5, y - 11, 5, false);
;
drawBee();
var update = $("#canvas").mousemove(function (event) 
    x=event.clientX;
    y=event.clientY;
);

setInterval(function () 
        ctx.clearRect(0, 0, 500, 500);
        drawBee(x, y);
        ctx.strokeRect(0, 0, 500, 500);
    , 30);

<canvas id="canvas"  ></canvas>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>

【参考方案2】：

我个人喜欢使用全局鼠标对象来存储坐标。这让我可以在任何需要的地方轻松插入鼠标坐标。

此外，如果您希望对象以鼠标为中心，则在更新鼠标位置时需要考虑画布 x 和 y 坐标。如您所见，我从 event.clientX 和 .clientY 中减去它们

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var mouse = x: null, y: null;

var circle = function (x, y, radius, fillCircle) 
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2, false);
  if (fillCircle) 
    ctx.fill();
   else 
    ctx.stroke();
  
;

var drawBee = function () 
  ctx.lineWidth = 2;
  ctx.strokeStyle = "Black";
  ctx.fillStyle = "Gold";
  circle(mouse.x, mouse.y, 8, true);
  circle(mouse.x, mouse.y, 8, false);
  circle(mouse.x - 5, mouse.y - 11, 5, false);
  circle(mouse.x + 5, mouse.y - 11, 5, false);
;
drawBee();

$("#canvas").mousemove(function (event) 
  mouse.x = event.clientX - canvas.getBoundingClientRect().x;
  mouse.y = event.clientY - canvas.getBoundingClientRect().y;
);

setInterval(function () 
        ctx.clearRect(0, 0, 500, 500);
        drawBee();
        ctx.strokeRect(0, 0, 500, 500);
    , 30);

<canvas id="canvas"  ></canvas>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>