个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
这是我的代码。我是 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>
最佳答案
您的代码中存在许多语法错误，这就是它不执行任何操作的原因。
首先，在循环中，您使用变量 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 语法的内容。从基础知识开始，就像每个人开始使用新语言编程时所做的那样......
关于javascript - 绘制贝塞尔曲线但 Canvas 保持空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23819307/
26
4
0
我是一名优秀的程序员,十分优秀！