画布中的画线有问题答案

【问题标题】：Drawing line in Canvas having issue画布中的画线有问题
【发布时间】：2013-06-10 19:22:12
【问题描述】：

我目前正在开发一个 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 坐标总是出错。

请帮助我，在此先感谢。

【问题讨论】：

标签： javascript ios html canvas html5-canvas

【解决方案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();

【讨论】：

@MidhunMP 请，这是来自第一个回复的代码，您不必更改它，因为它适用于 300x300 画布而不适用于其他尺寸。我在LAST EDIT中清楚地解释了为什么它是“/2”
@MidhunMP 我现在清楚地解释了如何重用代码，这个编辑无论如何都是错误的。他只是将代码更改为您在问题上发布的代码。我建议你，NK，在发布之前确定你写的内容
@AlessandroGabrielli：不，我用 400 X 700 检查了这个。它也在那里工作。问题出在属性上。我会再次检查并更新您
@MidhunMP 我刚刚解决了你的问题，你问为什么，用你的代码，你遇到了问题，我解释了为什么。我认为这是一个“不同”的解决方案..啊它适用于 400x700？而我的不是？！我不这么认为
@AlessandroGabrielli，我并不是说您的解决方案不正确。您寻找解决方案的方式似乎是假设性的。而且我的解决方案找不到任何问题。无论如何，我会接受你的建议和意见。

【解决方案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语境。从图片中可以看出：画布的高度和宽度（这是 500*500）与其偏移量、滚动和客户端大小不同。因此，在绘制之前，您需要计算比率：500/150 为高度系数，500/300 为宽度系数，因此 a 将乘以 1.66667，b 将乘以 3.33333。

对于旧示例（画布 300*300）相同，系数为 300/300=1 (a:width) 300/150=2 (b:height)

旧回复：

但现在，你得猜猜为什么……因为其实我没有时间

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

【讨论】：

@MidhunMP 嗯..我也在网上尝试了不同的脚本来绘制，但每次，我都会得到相同的“双重”错误。真实点和点击点之间的比例差异一定是有原因的。也许我们使用了错误的坐标
我想是的，我在谷歌上搜索过这个问题，但还没有找到解决方案。如果我得到任何结果会更新你:)无论如何谢谢:)
@MidhunMP 给我 2 分钟，我会发布答案
我遇到了实际问题。请检查上面的答案:)