如何在画布内的mouseX位置上创建一个矩形？

Question

我已经绘制了矩形我只需要在鼠标光标后左右移动。我知道mouseMove和事件监听器是错误的我只是把它们留在那里作为起点。这是代码：

var canvas; //This variable will be use as a reference to the canvas object
var ctx; //A variable to hold the value of the context
var rectX = 100; //rect X pos
var rectY = 200; //rect Y pos
var rectWidth = 25; //width
var rectHeight = 25; //height
var rectSpeedX = 10;
var rectSpeedY = 10;
var rectX2 = 400; //rect X pos
var rectY2 = 790; //rect Y pos
var rectWidth2 = 100; //width
var rectHeight2 = 20; //height

const WIDTH = 1000; //Width of the canvas
const HEIGHT = 800; //Height of the canvas

function mouseMove(event) {
  var rectX2 = clientX;
}
document.addEventListener("mousemove", mouseMove);


window.onload = function() {
  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext('2d');

  var framesPerSecond = 30; //FPS
  setInterval(function() {
    drawEverything(); //Calling the rect function 30 FPS
    movement();
  }, 1000 / framesPerSecond); //Calls the move and draw function using an inline function. 30 FPS 1000/30

}

function drawEverything() {
  ctx.fillStyle = 'red' //Draws the white background every frame covering square
  ctx.fillRect(0, 0, WIDTH, HEIGHT);
  ctx.fillStyle = 'black'
  ctx.fillRect(rectX, rectY, rectWidth, rectHeight); //redraws the recntangle each frame which gives the illusion of movement
  ctx.fillRect(rectX2, rectY2, rectWidth2, rectHeight2)
}

function movement() {
  rectX += rectSpeedX;
  rectY += rectSpeedY;

  if (rectX > WIDTH - 12.5 || rectX < 0) {
    rectSpeedX = -rectSpeedX;
  }
  if (rectY > HEIGHT - 12.5 || rectY < 0) {
    rectSpeedY = -rectSpeedY;
  }
}
rectX2

* {
  padding: 0;
  margin: 0;
}

canvas {
  background: #eee;
  display: block;
  margin: 0 auto;
}

<canvas id="myCanvas" width="1000" height="800"></canvas>

Answer 1

您可以将以下内容添加到mouseMove函数

function mouseMove(event){
  rectX2 = event.pageX;
}

要使光标居中，您可以添加：
rectX2 = event.pageX-((document.body.clientWidth-WIDTH)/2+ (rectWidth2/2));

有了这个，你也不需要脚本末尾的rectX2 = MouseX。但是如果你需要它，在处理程序中你只需用rectX2替换mouseX

＆＃13;

＆＃13;

var canvas; //This variable will be use as a reference to the canvas object
var ctx; //A variable to hold the value of the context
var rectX = 100;//rect X pos
var rectY = 200;//rect Y pos
var rectWidth = 25;//width
var rectHeight = 25;//height
var rectSpeedX = 10;
var rectSpeedY = 10;
var rectX2 = 400;//rect X pos
var rectY2 = 790;//rect Y pos
var rectWidth2 = 100;//width
var rectHeight2 = 20;//height

const WIDTH = 1000; //Width of the canvas
const HEIGHT = 800; //Height of the canvas

function mouseMove(event){
  rectX2 = rectX2 = event.pageX;
}
document.addEventListener("mousemove", mouseMove);


window.onload = function () {
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext('2d');

var framesPerSecond = 30; //FPS
setInterval(function(){
drawEverything();//Calling the rect function 30 FPS
movement();
}, 1000/framesPerSecond); //Calls the move and draw function using an inline function. 30 FPS 1000/30

}
function drawEverything(){
ctx.fillStyle = 'red' //Draws the white background every frame covering square
ctx.fillRect(0,0,WIDTH, HEIGHT);
ctx.fillStyle = 'black'
ctx.fillRect(rectX, rectY, rectWidth, rectHeight); //redraws the recntangle each frame which gives the illusion of movement
ctx.fillRect(rectX2, rectY2, rectWidth2, rectHeight2)
}
function movement(){
rectX += rectSpeedX;
rectY += rectSpeedY;

if (rectX > WIDTH-12.5|| rectX < 0){
rectSpeedX = -rectSpeedX;
}
if (rectY > HEIGHT-12.5 || rectY < 0){
rectSpeedY = -rectSpeedY;
}
}

＆＃13;

* { padding: 0; margin: 0; }
canvas { background: #eee; display: block; margin: 0 auto; }

＆＃13;

<canvas id="myCanvas" width="1000" height="800"></canvas>

＆＃13;

＆＃13;

＆＃13;