绘制贝塞尔曲线,但画布保持空白
draw a bezier curve but the canvas stays blank
这是我的代码。我是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语法的知识。从基础开始,就像每个人开始用一门新语言编程一样…
相关文章:
- 如何删除多行HTML排列中的空白
- 在Twitter上用ie9中的空白src访问iframe的contentWindow
- 不同浏览器中的空白字符正则表达式行为
- Javascript中的空白是什么
- Facebook共享显示一个接一个的空白页面
- 如果我在javascript中输入无效的电子邮件或空白,如何显示特定的文本框边框红色
- 在Angular 2中布线期间保持零部件处于活动状态
- Chrome应用程序调整窗口大小保持纵横比
- ScriptManager.RegisterStartupScript保持多次添加脚本块
- DIV 容器保持空白
- 角度:在另一个模态指令中加载的谷歌地图指令保持空白
- 改变JavaScript对象定义样式会导致画布保持空白
- Redux:表单输入字段保持空白
- 试图使固定表标题与水平滚动条.如何设置溢出:自动,但保持空白透明
- ASP.. NET MVC: Razor -如何在不向浏览器发送大量空白的情况下保持良好的缩进代码
- 如何保持从服务器加载的数据不被“空白”?通过Knockout JS加载页面
- 绘制贝塞尔曲线,但画布保持空白
- 在htmlo/p中保持空白
- 清除由相对定位创建的空白,并保持移动的对象不受影响
- 保持textArea不缩小空白区域