我正在尝试将此 JavaScript 代码(该代码是从其他人那里借来的，并给予适当的认可)插入到 HTML 页面中。我了解如何使用简单的 document.write() 通过 JavaScript 显示文本，并且对 Java 也相当流利，但我很难让这些函数正常工作。由于缺乏更好的词或词，我正在尝试使用 JavaScript 来实现一些动画。我发现了各种教程，它们显示了一些 JavaScript 逻辑并打印到屏幕上，但它们都没有使用动画，即使它们确实显示了一些动画，它们也没有显示如何将其包含到 HTML 中。我想在 HTML 页面中正确显示动画。我一直在阅读 w3 学校关于 JavaScript 的教程，其中大多数要么返回一些内容，要么使用 document.write 从表单或浏览器中提取信息。我相信这可能与创建一个用于在算法中显示运动的对象或与 JavaScript 的 DOM 有关。
我的 JavaScript 背后的想法是，我想模拟布雷森汉姆线算法的工作示例。这里有一个例子:Bresenham line algorithm
我还看到了大量关于将 JavaScript 包含在辅助文件中并使用 src 标记引用 JavaScript 的教程，但我想将 JavaScript 保留在 html 页面的末尾。
我还使用 Dreamweaver 来开发 HTML 和 JavaScript 页面。
下面列出了代码。另外，请随意列出我可以引用的网站或教程，以查看更多相关信息。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bresenham's Line Algorithm</title>
</head>
<body>
<script type="text/javascript">
/**
* Bresenham's line algorithm function
* by Matt Hackett [scriptnode.com]
* @param {Object} el The element to target (accepts both strings for id's and element *objects themselves)
* @param {Number} x1 The starting X coordinate
* @param {Number} y1 The starting Y coordinate
* @param {Number} x2 The finishing X coordinate
* @param {Number} y2 The finishing Y coordinate
* @param {Object} params Additional parameters [delay, onComplete, speed]
*/
var bresenham = function(el, x1, y1, x2, y2, params) {
var
interval,
b,
m,
sx,
y;
var init = function() {
var dx, dy, sy;
// Default parameters
params = params || {};
params.delay = params.delay || 10;
params.onComplete = params.onComplete || function(){};
params.speed = params.speed || 5;
// No point in doing anything if we're not actually moving
if ((x1 == x2) && (y1 == y2)) {
plot(x1, y);
params.onComplete();
return;
}
el = ((typeof el === 'string') ? document.getElementById(el) : el);
// Initalize the math
dx = x2 - x1;
sx = (dx < 0) ? -1 : 1;
dy = y2 - y1;
sy = (dy < 0) ? -1 : 1;
m = dy / dx;
b = y1 - (m * x1);
interval = setInterval(next, params.delay);
};
/**
* Execute the algorithm and move the element
*/
var next = function() {
y = Math.round((m * x1) + b);
plot(x1, y);
x1 += (sx * params.speed);
if (x1 >= x2) {
clearInterval(interval);
params.onComplete();
}
};
/**
* Move the target element to the given coordinates
* @param float x The horizontal coordinate
* @param float y The vertical coordinate
*/
var plot = function(x, y) {
el.style.left = x + 'px';
el.style.top = y + 'px';
};
init();
};
</script>
</body>
</html>
最佳答案
对我来说，代码很好。也许您只需要在页面中移动元素。根据该函数的文档，您需要指定页面中存在的元素的 id。
如果您打算在页面启动时运行它，则需要等待页面的 DOM 构建完成，然后才能对 DOM 进行任何操作。否则，您的函数可能会尝试访问尚未构造的元素。
(有几个 JavaScript 框架允许跨浏览器)
在正文中声明您希望受算法影响的元素。
<div id="elt1" style="position:absolute; top : 200px; left : 200px">element1</div>
然后在 Chrome 中使用控制台输入此内容，动画就开始工作了。我想您应该声明元素 position:absolute 的样式，因为您的算法使用与绝对定位元素一起使用的 top 和 left CSS 属性。
bresenham("elt1",100,100,300,300,null);
关于HTML 中的 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5945060/