javascript - 为什么间隔函数不执行,除非在Javascript中删除for循环
问题描述
在下面的代码中,每次调用 clearRect() 函数每 50 毫秒删除一次我在画布中绘制的先前渲染,但仅在从“moveVerts()”中删除用于绘制顶点的 for 循环时才有效。我得到的包含循环的结果是新的绘图呈现在前一个绘图的顶部,即使调用函数来清除画布 2d 上下文也是如此。第一次尝试 Javascript。
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var xCoord = [0, 176, 220, 259, 284, 310, 317, 310, 289, 262, 244, 219, 0, 0, 156, 198, 231, 246, 246, 231, 209, 182, 145, 0];
var yCoord = [0, 0, 8, 24, 45, 87, 133, 176, 214, 240, 251, 262, 262, 240, 240, 227, 200, 165, 116, 89, 72, 63, 59, 59];
var numCoord = xCoord.length;
ctx.beginPath();
ctx.lineWidth = "0";
ctx.strokeStyle = "black";
ctx.moveTo(0, 0);
for ( i = 0; i < numCoord; i++) {
ctx.lineTo(xCoord[i], yCoord[i]);
}
ctx.closePath();
ctx.stroke();
setInterval("moveVerts()", 50)
// make it squiggle
function moveVerts() {
var mScale = (Math.random() - .5) * 12;
ctx.clearRect(0, 0, c.width, c.height);
for ( i = 0; i < numCoord; i++) {
ctx.lineTo(xCoord[i] + mScale, yCoord[i] + mScale);
}
ctx.closePath();
ctx.stroke();
}
<canvas id="canvas" width=350 height=350></canvas>
解决方案
你忘了打电话
ctx.beginPath();
在你的moveVerts
功能中也是如此。如果没有,画布会保留您正在绘制的路径,每次都添加新行,然后描边整个东西。
固定代码(也是其他人提到的东西):
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var xCoord = [0, 176, 220, 259, 284, 310, 317, 310, 289, 262, 244, 219, 0, 0, 156, 198, 231, 246, 246, 231, 209, 182, 145, 0];
var yCoord = [0, 0, 8, 24, 45, 87, 133, 176, 214, 240, 251, 262, 262, 240, 240, 227, 200, 165, 116, 89, 72, 63, 59, 59];
var numCoord = Math.min(xCoord.length, yCoord.length);
ctx.lineWidth = "0";
ctx.strokeStyle = "black";
moveVerts();
setInterval(moveVerts, 50);
// make it squiggle
function moveVerts() {
var mScale = (Math.random() - .5) * 12;
ctx.clearRect(0, 0, c.width, c.height);
ctx.beginPath();
//^^^^^^^^^^^^^^^^
ctx.moveTo(xCoord[0] + mScale, yCoord[0] + mScale);
for (var i = 1; i < numCoord; i++) {
ctx.lineTo(xCoord[i] + mScale, yCoord[i] + mScale);
}
ctx.closePath();
ctx.stroke();
}
<canvas id="canvas" width=350 height=350></canvas>
推荐阅读
- r - 需要改进从 26 到 28 种不同格式的 R 正则表达式电话号码提取
- javascript - 下载pdf并直接在打印对话框中打开
- java - 从 PdfPTable 列(iText)获取绝对宽度
- json - api数据直接用python插入PostgreSQL数据库
- html - 如何在双引号中显示标签?
- xcode - 从哪里获得 7.2 Xcode 的开发人员映像
- python - 想要从给定站点抓取所有成员的个人资料链接
- entity-framework - 将更改保存到映射到视图的实体
- jquery - 如何根据第一个日期选择器更改第二个日期选择器日期?
- python - 如何在使用 python 3.4 的方法中将 `ObjectName` 的名称(如`self.lineEdit_260`)作为参数传递?