[英]Create external JavaScript file and call it on HTML5 canvas
我正在使用 D3.js 库在简单的 HTML5 画布中创建示例动画。
但我不会在 HTML 代码中使用<script>
。 我需要创建一个文件并将其放在那里。 那么,我如何在 HTML 代码中调用它?
这是我的 html 文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="js/delaunayanimation.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<section>
<canvas id="canvas">
//how to call javascript here?
</canvas>
</section>
</body>
</html>
这是我作为外部创建的脚本(它的名字是 delaunayanimation.js):
var width = 960,
height = 500,
τ = 2 * Math.PI,
gravity = .05;
var sample = poissonDiscSampler(width, height, 30),
nodes = [{x: 0, y: 0}],
s;
while (s = sample()) nodes.push(s);
var force = d3.layout.force()
.size([width, height])
.nodes(nodes.slice())
.gravity(0)
.charge(function(d, i) { return i ? -30 : -3000; })
.on("tick", ticked)
.start();
var voronoi = d3.geom.voronoi()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; });
var root = nodes.shift();
root.fixed = true;
var links = voronoi.links(nodes);
var canvas = d3.select("#canvas").append("canvas")
.attr("width", width)
.attr("height", height)
.on("ontouchstart" in document ? "touchmove" : "mousemove", moved);
var context = canvas.node().getContext("2d");
function moved() {
var p1 = d3.mouse(this);
root.px = p1[0];
root.py = p1[1];
force.resume();
}
function ticked() {
force.resume();
for (var i = 0, n = nodes.length; i < n; ++i) {
var node = nodes[i];
node.y += (node.cy - node.y) * gravity;
node.x += (node.cx - node.x) * gravity;
}
context.clearRect(0, 0, width, height);
context.beginPath();
for (var i = 0, n = links.length; i < n; ++i) {
var link = links[i];
context.moveTo(link.source.x, link.source.y);
context.lineTo(link.target.x, link.target.y);
}
context.lineWidth = 1;
context.strokeStyle = "#bbb";
context.stroke();
context.beginPath();
for (var i = 0, n = nodes.length; i < n; ++i) {
var node = nodes[i];
context.moveTo(node.x, node.y);
context.arc(node.x, node.y, 2, 0, τ);
}
context.lineWidth = 3;
context.strokeStyle = "#fff";
context.stroke();
context.fillStyle = "#000";
context.fill();
}
// Based on https://www.jasondavies.com/poisson-disc/
function poissonDiscSampler(width, height, radius) {
var k = 30, // maximum number of samples before rejection
radius2 = radius * radius,
R = 3 * radius2,
cellSize = radius * Math.SQRT1_2,
gridWidth = Math.ceil(width / cellSize),
gridHeight = Math.ceil(height / cellSize),
grid = new Array(gridWidth * gridHeight),
queue = [],
queueSize = 0,
sampleSize = 0;
return function() {
if (!sampleSize) return sample(Math.random() * width, Math.random() * height);
// Pick a random existing sample and remove it from the queue.
while (queueSize) {
var i = Math.random() * queueSize | 0,
s = queue[i];
// Make a new candidate between [radius, 2 * radius] from the existing sample.
for (var j = 0; j < k; ++j) {
var a = 2 * Math.PI * Math.random(),
r = Math.sqrt(Math.random() * R + radius2),
x = s.x + r * Math.cos(a),
y = s.y + r * Math.sin(a);
// Reject candidates that are outside the allowed extent,
// or closer than 2 * radius to any existing sample.
if (0 <= x && x < width && 0 <= y && y < height && far(x, y)) return sample(x, y);
}
queue[i] = queue[--queueSize];
queue.length = queueSize;
}
};
function far(x, y) {
var i = x / cellSize | 0,
j = y / cellSize | 0,
i0 = Math.max(i - 2, 0),
j0 = Math.max(j - 2, 0),
i1 = Math.min(i + 3, gridWidth),
j1 = Math.min(j + 3, gridHeight);
for (j = j0; j < j1; ++j) {
var o = j * gridWidth;
for (i = i0; i < i1; ++i) {
if (s = grid[o + i]) {
var s,
dx = s.x - x,
dy = s.y - y;
if (dx * dx + dy * dy < radius2) return false;
}
}
}
return true;
}
function sample(x, y) {
var s = {x: x, y: y, cx: x, cy: y};
queue.push(s);
grid[gridWidth * (y / cellSize | 0) + (x / cellSize | 0)] = s;
++sampleSize;
++queueSize;
return s;
}
}
在运行代码之前,您需要等待画布等项目加载到 DOM 中。 您可以将其保留在<head>
标记中并将代码包装在document.ready
,也可以将其移动到正文的底部,如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<script src="https://d3js.org/d3.v3.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<section>
<canvas id="canvas">
//how to call javascript here?
</canvas>
</section>
<script src="js/delaunayanimation.js"></script>
</body>
</html>
您的问题是您试图在<canvas>
内附加一个<canvas>
,这是毫无意义的。 这一行:
var canvas = d3.select("#canvas").append("canvas")
查找 ID 为“canvas”的元素并在其中添加<canvas>
。 但是在您的 HTML 中,该元素是一个画布:
<section>
<canvas id="canvas">
</canvas>
</section>
如果您只是将其更改为<div>
,例如:
<section>
<div id="canvas">
</div>
</section>
你的代码会起作用。 这是一个向您展示的工作小提琴(我所做的唯一一件事就是上述更改): https : //jsfiddle.net/vcg1pk9v/1/
另外,请记住 Spencer 的回答:操作该 div 的代码必须在创建该 div之后出现(在 JSFiddle 中,代码将自动运行)。 一个好的做法是在关闭<body>
之前放置它(或调用它,如果是外部的)。 话虽如此,您的问题实际上有两个问题; 斯宾塞处理了其中一个,我处理了另一个。
嘿,在你定义你的画布之后调用它。
使用<script src="script path here"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.