Javascript画布，以错误的坐标绘制 [英] Javascript canvas, drawing at wrong coordinates
问题描述
我正在 mousePos标头中正确读取并打印鼠标坐标，但是当我在画布上绘制时，使用相同的精确坐标，通过单击并拖动，我绘制到了最底端和对。我可以通过不使用style.canvas.width = 512px来解决此问题，但是我无法设置大小。大小必须为512 x512。
I am reading and printing the mouse coordinates correctly in my "mousePos" header But when I draw on the canvas, using the same exact coordinates, by clicking and dragging, I am drawing to far to the bottom and to far to the right. I can fix this by not using style.canvas.width="512px", but then I can not set the size. The size must be 512 by 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 。这些属性应该与您设置相应的CSS属性相同。
You have to add the attributes width and height to your canvas. These properties should be the same you set the respective css properties.
请参见以获取更多信息。
See Canvas is stretched when using CSS but normal with "width" / "height" properties for more information on this.
更改
<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画布，以错误的坐标绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
