我已经绘制了矩形，我只需要跟随鼠标光标从左到右移动即可。我知道 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>您可以将以下内容添加到 mouseMove 函数中
function mouseMove(event){
rectX2 = event.pageX;
}
要使其以光标为中心，您可以添加：
rectX2 = event.pageX-((document.body.clientWidth-WIDTH)/2+ (rectWidth2/2));
有了这个，您也不需要rectX2 = MouseX脚本末尾的 。但是，如果你需要它，在处理你只是换出rectX2与mouseX
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;
}
}* { padding: 0; margin: 0; }
canvas { background: #eee; display: block; margin: 0 auto; }<canvas id="myCanvas" width="1000" height="800"></canvas>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句