个人中心
gpt4 book ai didi

javascript - 我在 Canvas 绘图中做错了什么？

转载 作者：行者123 更新时间：2023-11-28 20:03:40 25 4
gpt4 key购买 nike

我是 JavaScript 新手，如果我的错误很明显，我很抱歉!我正在尝试使用规范形式方程绘制椭圆。

<html>
    <body>
        <canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;">
        </canvas>
        <script language="javaScript">
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");

        var HEIGHT = ctx.height;
        var WIDTH = ctx.width;
        function transform(p){
            return [ WIDTH/2 + p[0], HEIGHT/2 - p[1]];
        } 

        var a = 70; //length parallel to x axis
        var b = 30; //length parallel to y axis
        var h = 150 - WIDTH/2; //when tranformed this gives the pixel 150
        var k = -HEIGHT/2 - 100; //when transformed this gives pixel 100

        function y(x){
            return b*Math.sqrt(1 - Math.pow((x - h)/a, 2)) + k;
        }

        var dx = a/2/100 ; //each quadrant is broken into 100 segments
        var pOld = [h - a/2, k]; //starting point
        var pNew = [0,0];
        var x1 = 0;
        var x2 = 0;
        var y1 = 0;
        var y2 = 0;
        var temp = [0,0];

        for (var i = 0; i < 100; ++i){

            pNew[0] = pOld[0] + dx;
            pNew[1] = y(pNew[0]);

            temp = transform(pOld);
            x1 = temp[0]; y1 = temp[1];
            temp = transform(pNew);
            x2 = temp[0]; y2 = temp[1];

            ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); //x1, y1 -> x2, y2
            ctx.moveTo(x1, -y1); ctx.lineTo(x2, -y2); //x1,-y1 -> x2,-y2
            ctx.moveTo(-x1, y1); ctx.lineTo(-x2, y2); //-x1,y1 -> -x2, y2
            ctx.moveTo(-x1, -y1); ctx.lineTo(-x2, -y2); //-x1,-y1 -> -x2,-y2

            pOld = pNew;
        }

        ctx.lineWidth = 2;
        ctx.strokeStyle = "#232323";
        ctx.stroke();

        </script>
    </body>
</html>

最佳答案

您的值为 NaN(非数字)。更改这些行:

var HEIGHT = ctx.height;
var WIDTH = ctx.width;

至

var HEIGHT = c.height;
var WIDTH = c.width;

然后你就得到了正确的数字。但是，您的 y 值位于 Canvas 区域之外 - 如果您对这些值进行 console.log，您将会看到这一点。一般来说，数学上似乎存在一些问题，我在这里不讨论这些问题，但就 Canvas 而言，您应该更进一步。

关于javascript - 我在 Canvas 绘图中做错了什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21213847/

25 4 0
文章推荐： javascript - 将 JS 变量作为对象标签中的数据属性
文章推荐： javascript - 递归循环 JSON 数据
文章推荐： javascript - 根据窗口高度调整图像大小
文章推荐： javascript - 如何在dom中存储和追加大字符串
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com