绘制贝塞尔曲线，但画布保持空白答案

【问题标题】：draw a bezier curve but the canvas stays blank绘制贝塞尔曲线，但画布保持空白
【发布时间】：2014-05-23 00:39:42
【问题描述】：

这是我的代码。我是 JavaScript 新手，所以我很难找到我的代码有什么问题。我尝试向函数的各个部分添加警报，以检查哪些部分没有成功。

<!DOCTYPE html>
<html>
<head>
<script>
function BEZIER() {
    var X = ["0,0,0,0,0"];
    var Y = ["0,0,0,0,0"];
    X[0] = document.getElementById("X0");
    Y[0] = document.getElementById("Y0");
    X[0] = document.getElementById("X1");
    Y[0] = document.getElementById("Y1");
    X[0] = document.getElementById("X2");
    Y[0] = document.getElementById("Y2");
    X[0] = document.getElementById("X3");
    Y[0] = document.getElementById("Y3");
    X[0] = document.getElementById("X4");
    Y[0] = document.getElementById("Y4");
    var A;
    var B;
    var T = 0;
    while (T <= 1) {
        var i = 0;
        while (i < 5) {
            A[i] = X[i];
            B[i] = Y[i];
            i++;
        }
        i = 0;
        var j = 5;
        while (j > 1) {
            i = 0;
            while (i < j) {
                A[i] = A[i] * (1 - T) + A[i + 1] * T;
                B[i] = B[i] * (1 - T) + B[i + 1] * T;
                i++;
            }
            j--;
        }
        T = T + 0.1;
        var S = document.getElementById("a");
        var ctx = S.getContext("2d");
        ctx.beginPath();
        ctx.arc(A[0], B[0], 10, 0, 2 * Math.PI);
        ctx.fill();
    }
}
</script>
</head>
<body>
    <p>Introduceti coordonatele cu valori intre 0 si 800</p> <br>
    <form>punctul 0: X=<input type="number" id="X0" name="X0" >, Y=<input type="number" id="Y0" name="Y0" ><br></form>  
    <form>punctul 1: X=<input type="number" id="X1" name="X1" >, Y=<input type="number" id="Y1" name="Y1" ><br></form>
    <form>punctul 2: X=<input type="number" id="X2" name="X2" >, Y=<input type="number" id="Y2" name="Y2" ><br></form>
    <form>punctul 3: X=<input type="number" id="X3" name="X3" >, Y=<input type="number" id="Y3" name="Y3" ><br></form>
    <form>punctul 4: X=<input type="number" id="X4" name="X4" >, Y=<input type="number" id="Y4" name="Y4" ><br></form>   
    <button onclick="BEZIER()">!DESENATI!</button><br><br>
     <canvas id="a" width="800" height="800" style="border:1px solid #000000;">
    </canvas>

</body>

【问题讨论】：

我强烈建议使用 console.log() 和 Firebug 或 Chrome 开发者工具，而不是仅仅在 javascript 中加入警报来调试你的代码
我建议阅读 MDN 教程，例如developer.mozilla.org/en/JavaScript/…，在作为早期的 js 项目在画布上绘制曲线之前。
为什么不使用内置的 bezierCurveTo() 方法？ html5canvastutorials.com/tutorials/html5-canvas-bezier-curves
我正在尝试从头开始。我知道数学，但我的 Js 技能处于初级水平

标签： javascript canvas bezier

【解决方案1】：

你的代码中有很多语法错误，这就是为什么它什么都不做。

首先，在您的循环中，您使用变量 A 和 B，但没有初始化它们。试试var A = []; var B = [];

另外，如果你想获得input 标签的值，你必须这样做

document.getElementById("X0").value

而不是

document.getElementById("X0")

但真正奇怪的是，您总是为 X 和 Y 的相同元素分配一个新值：

X[0] = ...something...
X[0] = ...something else...

此外，当您创建 X 和 Y 数组时，实际上您只是在创建以单个字符串作为元素的数组...试试这个吧：

var X = [0,0,0,0,0];
var Y = [0,0,0,0,0]; // without the "

但是正如有人已经说过的那样，我建议您在尝试编写对您来说太难的东西之前，先阅读更多关于 Javascript 的语法。从基础开始，就像每个人开始使用新语言编程时一样...

【讨论】：