个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在关注这个 MDN 教程:
我想知道我们如何使用鼠标移动事件来控制球的移动。
我已经看到 mousemove 可以与 textarea 和一些输入一起使用:
https://developer.mozilla.org/en-US/docs/Web/Events/mousemove
我想如果我们可以在 Canvas 后面放一个文本区域，我们就可以检测事件、获取鼠标的位置并让用户通过鼠标移动来改变球的移动。
我已阅读:
Dynamically resize textarea width and height to contain text
所以我尝试了:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Juego</title>
<style>
* {
padding: 0;
margin: 0;
}
canvas {
background: #eee;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<textarea name="ta" id="ta" cols="30" rows="10"></textarea>
<canvas id="myCanvas" width="480" height="320"></canvas>
<script>
const textarea = document.getElementById('ta');
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
textarea.style.height = canvas.height;
textarea.style.width = canvas.width;
let x = canvas.width / 2;
let y = canvas.height - 30;
const dx = 2;
const dy = -2;
let drawBall = function () {
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI * 2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
};
function draw(e) {
console.log(e);
ctx.clearRect(0,0,canvas.width,canvas.height);
drawBall();
x += dx;
y += dy;
}
setInterval(draw, 10);
canvas.addEventListener('mousemove', draw);
</script>
</body>
</html>
预期的输出是让文本区域使用 Canvas 的宽度和高度，并在它后面；但是它较小并放在左上角:
感谢您的帮助。
最佳答案
您不需要 textarea 来捕获事件，这会很复杂，因为 canvas 将在顶部，而 textarea 永远不会知道鼠标在它上面移动，为了让球随着鼠标移动，你必须将鼠标的 x 和 y 传递给draw(); 移动函数
这是一个 fiddle :https://jsfiddle.net/vqdyLx5u/22/
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
function drawBall(x, y) {
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI * 2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function draw(x, y) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall(x, y);
}
draw(canvas.height / 2 , canvas.width / 2); // initial draw
canvas.addEventListener('mousemove', function(e) {
draw(e.pageX, e.pageY); // the coordinates of the mouse
});* {
padding: 0;
margin: 0;
}
canvas {
background: #eee;
display: block;
margin: 0 auto;
}<canvas id="myCanvas" width="480" height="320"></canvas>关于javascript，使用鼠标控制球的运动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49711651/
24
4
0
我是一名优秀的程序员,十分优秀！