Question

我目前正在开发一款使用HTML 5和JavaScript绘制图表的iOS应用。

我刚做了一个示例App。

我的代码：

<!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坐标。这是正确的。唯一的问题是绘制功能。

截图：

Clicked point

Drawn Line

正如您所见，X坐标是正确的。但Y坐标总是出错。

请帮助我，提前致谢。

Answer 1

你能否做出这些改变。

在html行@ 47，

 <canvas id="can" height=300 width=300 style="background-color:red;">Oops!</canvas>

在脚本行@ 23，

            c.beginPath();
            c.moveTo(a, b);
            a = event.clientX - parentPosition.x;
            b = event.clientY - parentPosition.y;
            console.log('a:'+a+'--b:'+b);
            c.lineTo(a, b);
            c.stroke();

Answer 2

清除这是您必须更改为具有可重用代码的代码：

        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上下文。从图像中可以看出： enter image description here 画布的高度和宽度（这是500 * 500）与其偏移量，滚动和客户端大小不同。因此，在绘制之前，您需要计算比率：500/150将是高度系数，500/300将是宽度1，因此a将乘以1.66667，b将乘以3.33333。

旧示例（画布300 * 300）相同，系数为300/300 = 1（a：宽度）300/150 = 2（b：高度） enter image description here

OLD REPLY：

但现在，你必须猜测为什么......因为实际上我没有时间

<!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>

画布中的画线有问题

我的代码：

我的问题：

截图：

2 个答案: