在画布上绘图时偏移 [英] Offset when drawing on canvas
问题描述
有一个简单的绘图应用程序.问题在于坐标(redraw 函数):它们必须是鼠标，但接近 2x 鼠标.代码有什么问题?
Have a simple drawing application. The problem is in the coordinates (redraw function): they must be mouse, but are near 2x mouse. What's the problem in the code?
<html>
<head>
<style type="text/css" media="screen">
body{
background-color: green;
}
#workspace{
width: 700px;
height:420px;
margin: 40px auto 20px auto;
border: black dashed 1px;
}
#canvas{
background: white;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
var context = document.getElementById('canvas').getContext("2d");
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
$('#canvas').mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(mouseX,mouseY, false);
redraw();
});
$('#canvas').mousemove(function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
$('#canvas').mouseup(function(e){
paint = false;
});
$('#canvas').mouseleave(function(e){
paint = false;
});
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw(){
canvas.width = canvas.width; // Clears the canvas
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;
for(var i=1; i < clickX.length; i++)
{
context.beginPath();
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i], clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
console.log(clickX[clickX.length-1]+" "+clickY[clickX.length-1]);
}
});
</script>
</head>
<body>
<div id="workspace">
<canvas id="canvas"/>
</div>
</body>
</html>
推荐答案
您不应该通过 CSS 设置画布的宽度/高度.它使画布拉伸而不是使分辨率更高.这意味着虽然坐标是正确的，但它们在视觉上会在其他地方结束.
You should not set a canvas' width/height through CSS. It makes the canvas stretch instead of making the resolution higher. This means that although the coordinates are correct, they will visually end up somewhere else.
例如，100 的 x 坐标将被拉伸为视觉上的 200 的 x 坐标(或其他；至少它会比 >100，因为它已被拉伸).
For example, an x coordinate of 100 will be stretched to visually be an x coordinate of 200 (or something else; at least it will be bigger than 100 since it's been stretched).
改为:
<canvas id="canvas" width="700" height="420" />
并删除 CSS 中的 width: 100%.
and remove the width: 100% in CSS.
这篇关于在画布上绘图时偏移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
