我正在我的“mousePos”标题中正确读取和打印鼠标坐标但是当我在 Canvas 上绘制时，使用相同的精确坐标，通过单击和拖动，我绘制到底部和底部正确的。我可以通过不使用 style.canvas.width="512px"来解决这个问题，但是我无法设置大小。大小必须为 512 x 512。
有什么建议吗？
var resize =1;
var mouseX, mouseY;
var pen = "?";
var canvas = document.getElementById('canvas');
var menu = document.getElementById('menu');
var ctx = canvas.getContext('2d');
var fill = "#FF0000"; //Red
canvas.style.width="512px";
canvas.style.height="512px";
menu.style.width="512";
menu.style.height="512";
canvas.addEventListener("mousedown", penDown);
canvas.addEventListener("mouseup", penUp);
function mouseMove(event) {
mouseX = event.clientX - ctx.canvas.offsetLeft;
mouseY = event.clientY - ctx.canvas.offsetTop;
document.getElementById('mousePos').innerHTML = "Mouse Position: X" + mouseX + " Y" + mouseY;
if(pen == "down") {
ctx.fillRect(mouseX, mouseY, 4, 4);
}
}
function penDown() {
pen = "down";
//alert("pen = " + pen + " mouse pos:" + mouseX + "," + mouseY);
}
function penUp() {
pen = "up";
// alert("pen = " + pen + " mouse pos:" + mouseX + "," + mouseY);
}
function backGround() {
//alert("Called backGround");
canvas.style.backgroundColor = document.getElementById('BackGround').value;
}
function penColor(){
//alert("Called penColor");
fill = document.getElementById('PenColor').value;
ctx.fillStyle = fill;
}
/*
questions:
Why is my pen not drawing at the mousepos?
use addEventListener or onEvent?
call script when body loads(onDOMcontentLoaded), or call function from script(onload="init()")
Am I taking the right approach, or am I coding myself into a corner?
Any other tips?
*/
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Canvas Test 3</title>
<script>
</script>
</head>
<body bgcolor="#20b2aa">
<canvas id="canvas" style="position: absolute;
border: 2px solid black; background-color: white"
onmousemove="mouseMove(event)">
</canvas>
<div id="menu" style="position: absolute; right: 20%;
background-color: lightcoral; border: 2px solid black;">
<p> Back Ground:
<select id="BackGround" onchange="backGround();">
<option value="white">white</option>
<option value="black">black</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
<option value="orange">orange</option>
<option value="purple">purple</option>
</select>
</p>
<p> Pen Color:
<select id="PenColor" onchange="penColor()">
<option value="#000000">black</option>
<option value="#FFFFFF">white</option>
<option value="#FF0000">red</option>
<option value="#0000CC">blue</option>
<option value="#006600">green</option>
<option value="#FFFF00">yellow</option>
<option value="#FF3300">orange</option>
<option value="#990099">purple</option>
</select>
</p>
</div>
<h2 id="mousePos" style="position: absolute; bottom: 5%">Mouse Position | </h2>
</body>
</html>最佳答案
您必须将属性 width 和 height 添加到 Canvas 。这些属性应该与您设置的相应 css 属性相同。
参见 Canvas is stretched when using CSS but normal with "width" / "height" properties有关这方面的更多信息。
改变
<canvas id="canvas" style="position: absolute; border: 2px solid black; background-color: white" onmousemove="mouseMove(event)">
到
<canvas id="canvas" width="512" height="512" style="position: absolute; border: 2px solid black; background-color: white" onmousemove="mouseMove(event)">
关于Javascript Canvas ，在错误的坐标处绘制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26960931/