画布中有问题的画线
我目前正在开发一个iOS应用程序，它使用HTML 5和JavaScript绘制图形。
我刚做了一个应用程序样本。
我的守则：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var a = 0;
var b = 0;
function init()
{
var can = document.getElementById('can');
can.addEventListener("click",click, false);
}
function click(event)
{
var can = document.getElementById('can');
var c = can.getContext('2d');
var parentPosition = getPosition(event.currentTarget);
c.lineWidth = 1;
c.strokeStyle = '#FFFFFF';
c.beginPath();
c.moveTo(a, b);
a = event.clientX - parentPosition.x;
b = event.clientY - parentPosition.y;
c.lineTo(a, b);
c.stroke();
}
function getPosition(element)
{
var xPosition = 0;
var yPosition = 0;
while (element)
{
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
</script>
</head>
<body oncopy='copy();' onpaste='paste();'onload ='init();'>
<canvas id="can" style="height:300px;width:300px;background-color:black;">Oops!</canvas>
</body>
</html>我的问题是：
当用户在屏幕上点击时，我从前一点开始画一条线到那个特定的点。
但是在我的例子中，当我点击屏幕的时候，这条线被画到了另一个点。比方说，如果我点击了点(100,100)，这条线就会被画成(100，一些任意值)。Y的位置总是错的。
我所做的：
- 在模拟器上测试过
- 在设备上测试过
- 在Firefox上进行了测试
- 在Chrome上测试过
结果都是一样的。我找不到那个问题。我通知了点击的x和y的协调者。一切都是正确的。唯一的问题是抽签功能。
截图：
如你所见，X坐标是正确的。但Y坐标总是出错。
请帮我，谢谢。
回答 1
Stack Overflow用户
发布于 2013-06-06 13:36:58
清除--这是您必须更改的代码，以获得可重用的代码：
c.moveTo(a/(can.clientWidth/can.width), b/(can.clientHeight/can.height));
a = event.clientX - parentPosition.x;
b = event.clientY - parentPosition.y;
console.log('a:'+a+'--b:'+b);
c.lineTo(a/(can.clientWidth/can.width), b/(can.clientHeight/can.height));如果您不使用这个，下面的代码只适用于300x300画布大小。
最后编辑：
通过分析2d上下文(var c= can.getContext(' 2d ');console.log(c);)，您可以很容易地理解这个错误:画布和它的2d上下文之间有一个关系(不是显式的)。从图像中可以看到：
画布的高度和宽度(这是500*500)与其偏移量、卷轴和客户端大小不同。因此，在绘制之前，你需要计算出这个比率: 500/150是高度系数，500/300是宽度系数，所以a乘以1.66667，b乘以3.33333。
对于旧的例子(画布300*300)，系数为300/300=1 (a:宽度) 300/150=2 (b:高度)
旧回复：
但现在，你得猜到why..cause其实我没有时间
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
var a = 0;
var b = 0;
function init()
{
var can = document.getElementById('can');
can.addEventListener("click",click, false);
}
function click(event)
{
var can = document.getElementById('can');
var c = can.getContext('2d');
var parentPosition = getPosition(event.currentTarget);
console.log(parentPosition);
console.log(event);
c.lineWidth = 1;
c.strokeStyle = '#FFFFFF';
c.beginPath();
c.moveTo(a, b/2);
a = event.clientX - parentPosition.x;
b = event.clientY - parentPosition.y;
console.log('a:'+a+'--b:'+b);
c.lineTo(a, b/2);
c.stroke();
}
function getPosition(element)
{
var xPosition = 0;
var yPosition = 0;
while (element)
{
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
</script>
</head>
<body oncopy='copy();' onpaste='paste();'onload ='init();'>
<canvas id="can" style="height:300px;width:300px;background-color:black;">Oops!</canvas>
<br>
pagex<input type="text" id="ics">pagey<input type="text" id="ips"><br>
screenx<input type="text" id="ics2">screeny<input type="text" id="ips2">
<script>
$("#can").mousemove(function(event) {
var msg = "Handler for .mousemove() called at ";
document.getElementById('ics').value= event.pageX
document.getElementById('ips').value= event.pageY;
document.getElementById('ics2').value= event.screenX;
document.getElementById('ips2').value= event.screenY;
});
</script>
</body>
</html>https://stackoverflow.com/questions/16961799
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号