HTML5画圆问题

_沫尘 2013-04-28 08:15:00



<!DOCTYPE HTML>

<html>

<body>

    <canvas id="myCanvas" width="1000" height="1000">

        <p>Your browserdoes not support the canvas element!</p>

    </canvas>



    <script type="text/javascript">

        window.onload = function () {

            clock();

            tt = setInterval(clock, 200);///

        };

        var tt;

        var r = 200;

        var p = [];

        for (var i = 1; i <= 11; i++) {

            p[i * 2] = -Math.sin(Math.PI / 6) * r + Math.sin(Math.PI / 6) * r * i / 10;  //x

            p[i * 2 + 1] = Math.cos(Math.PI / 3) * r - 2 * Math.sin(Math.PI / 3) * Math.cos(Math.PI / 6) * r * i / 10;  //y



        }

        var j = 1;

        function clock() {

            if (j >= 10) {

                clearInterval(tt);

            }

            var c = document.getElementById("myCanvas").getContext("2d");

            c.clearRect(0, 0, 1000, 1000);    ///初始化画布

            c.save();

            c.translate(359, 366);

            c.rotate((j + 1) * Math.PI / 40);

            c.lineCap = "round";

            c.save();



            c.strokeStyle = "#D40000";

            c.lineWidth = 1;

            c.beginPath();

            c.moveTo(Math.cos(0.75 * Math.PI) * r, Math.sin(0.75 * Math.PI) * r);

            c.lineTo(p[j * 2], p[j * 2 + 1]);

            c.stroke();

            c.save();





            c.lineWidth = 1;

            c.strokeStyle = "#325FA2";

            c.beginPath();

            var k = 1;

            if (j > 0) k = j;

            c.arc(0, 0, r, 0.75 * Math.PI, 0.75 * Math.PI + Math.PI * 2 * k / 30, false);

            c.stroke();

            c.restore();

            c.restore();

            c.restore();

            j++;



        }

    </script>

</body>

</html>

我要实现的目标就是画圆的同时画弦，起笔点是0.75PI 的位置，总体思路对了，但是结果明显不对的，如下图：（先只画了三分之一圆，想先把问题搞定先）

如图，圆弧和红色的弦是上述代码绘制的（可以直接复制上述代码保存成html，在支持html5的浏览器可以直接看效果），黑色的线是我手动P上去的，黑色的才应该是正确想要的结果，而红色明显是错误的，产生了偏移，原因我理解的是因为求坐标中的cos， sin出来的多为小数，而坐标都是整数表示的，JS去画的时候肯定是取整了，然后一个点偏一点点，一个点偏一点点，最终就偏移了那么多。

可能就这么看代码我说的不太明白我的意思，把代码复制成html看下就明白我表达的意思了。

我是html5新手，上述代码可能非常低级但是我就是想弄明白怎么解决这个偏移的问题，

希望能得到指点。。。

...全文

449 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

_沫尘 2013-06-25

打赏
举报

引用 8 楼 KK3K2005 的回复:

下午空下来帮你一起研究下

非常感谢，我最近忙着其他的开发，主要是一些数据处理，没有静下来研究前端了，其实，怎么说呢，真正项目用的时候，各种动画特效一抓一大堆，主要我就是想弄明白这个画圆的原理，所以鼓捣出这么个问题，不弄明白不死心啊

KK3K2005 2013-06-25

打赏
举报

下午空下来帮你一起研究下

_沫尘 2013-06-25

打赏
举报

引用 6 楼 wjqqonline 的回复:

[quote=引用 5 楼 KK3K2005 的回复:] 真晕阿多久了还没搞定那

最近没有研究前端了我是做后端的，以上问题是研究html5动画的时候想出来的[/quote] 当然，不去管它，用现成的网上各种动画就可以，只是我就想弄明白里面的原理，

_沫尘 2013-06-25

打赏
举报

引用 5 楼 KK3K2005 的回复:

真晕阿多久了还没搞定那

最近没有研究前端了我是做后端的，以上问题是研究html5动画的时候想出来的

KK3K2005 2013-06-25

打赏
举报

真晕阿多久了还没搞定那

_沫尘 2013-06-25

打赏
举报

回复3楼如果是直接连接两点的绘制肯定不会偏差，你可以先把我的html保存一下，看下效果，我是一点一点的画。画的过程中旋转画布，实现一种动态的效果，然后结果就成我问题中的那样了，不知道是哪里出问题了，最近忙着服务端的代码开发，前端这块html5没时间继续研究了，过了这么久，还没解决，还是想继续把问题弄明白希望有html5绘图高手帮忙看下，画过圆的应该能看明白我的意思

_沫尘 2013-06-25

打赏
举报

引用 13 楼 KK3K2005 的回复:

话说添加辅助线就可以看出你的线段的终点是不对的

谢谢，你回答的即使我想要的效果，晚上认真仔细对照了你的和我自己的代码唯一的区别在于：我0楼所贴出代码的第48行，我的：c.arc(0, 0, r, 0.75 * Math.PI, 0.75 * Math.PI + Math.PI * 2 * k / 30, false); 你的：c.arc(0, 0, this.r, 0.75 * Math.PI, 0.75 * Math.PI + Math.PI/180 * 135/10*k , false); 就是判断变化着的弦的Y坐标的地方我们不一致其他地方都一模一样，那么我们俩到底谁对谁错？其实我俩都对，计算圆相关的（弧，弦）公式我和你都是对的，并且这公式全宇宙通用的，也不会有两样，那么为什么我自己的却出现偏差了呢？继续分析，通过你给的 Math.PI/180 * 135/10*k 这个135我打开绘图工具画了个坐标系个圆，然后发现，按照我题目的需求135是对的，即：从0.75pi的位置到1.5pi的位置之间是135的弧度，所以你的代码能使弧和弦最后吻合在1.5pi的位置；而我的计算也没有错为什么结果却没有吻合呢？继续分析，原来我的因为我在写这个html5的小例子时我本意是画圆的内接三角形三边和弧动画吻合，结果我先入为主的把这个弦终点定在了1.5pi然后认为那里就是内接的顶点（实际上是错误的），然后实际计算时弦长却是按照真正的内接三角形边长计算的，这样一来，最终到达的终点肯定是不吻合的。在CSDN上提出这个问题之前我已经仔细的检查了自己的代码没有发现问题（因为代码本身全是正确的），然后过了这么多天，直到今天，你回答这个问题给出了135这个数字，我再回头绘图查看才发现我的代码真实想要的终点应该是17/12*pi的位置。即：我的代码弦的计算终点放在17/12*pi的位置就对了。非常感谢你的回答。

_沫尘 2013-06-25

打赏
举报

引用 10 楼 xuzuning 的回复:

你画弧和画弦不是一个终点，自然端点就不会重合了弦的终点坐标 p[i * 2] = -Math.sin(Math.PI / 6) * r + Math.sin(Math.PI / 6) * r * i / 10; //x p[i * 2 + 1] = Math.cos(Math.PI / 3) * r - 2 * Math.sin(Math.PI / 3) * Math.cos(Math.PI / 6) * r * i / 10; //y 弧的终点 0.75 * Math.PI + Math.PI * 2 * k / 30 把 c.lineTo(p[j * 2], p[j * 2 + 1]); 改为 c.lineTo(Math.cos(0.75 * Math.PI + Math.PI * 2 * j / 30) * r, Math.sin(0.75 * Math.PI + Math.PI * 2 * j / 30) * r); 就可以了

这个不是我要的效果，我要画的终点只有一个，就是你回答的这种效果的最后那个点， 11楼即是我所要表达的效果。等下我会详细分析问题

KK3K2005 2013-06-25

打赏
举报

话说添加辅助线就可以看出你的线段的终点是不对的

KK3K2005 2013-06-25

打赏
举报

绘制个辅助线就清楚了三角函数全忘光了只能写个直接的数值了

KK3K2005 2013-06-25

打赏
举报

xuzuning 2013-06-25

打赏
举报

你画弧和画弦不是一个终点，自然端点就不会重合了弦的终点坐标 p[i * 2] = -Math.sin(Math.PI / 6) * r + Math.sin(Math.PI / 6) * r * i / 10; //x p[i * 2 + 1] = Math.cos(Math.PI / 3) * r - 2 * Math.sin(Math.PI / 3) * Math.cos(Math.PI / 6) * r * i / 10; //y 弧的终点 0.75 * Math.PI + Math.PI * 2 * k / 30 把 c.lineTo(p[j * 2], p[j * 2 + 1]); 改为 c.lineTo(Math.cos(0.75 * Math.PI + Math.PI * 2 * j / 30) * r, Math.sin(0.75 * Math.PI + Math.PI * 2 * j / 30) * r); 就可以了

KK3K2005 2013-05-01