嗨，我对javascript很陌生，所以请原谅，但我正在尝试使这段代码一起运行。但是似乎函数renderBackground（）;在renderCanvas（）中将覆盖draw（）; ？这和requestAnimationFrame有关系吗？还是我做错了...感谢您的任何帮助
function draw() {
count++;
drawArea.fillStyle = "white";
// Grab all the characters up to count
chars = words.substr(0, count);
// Clear the canvas each time draw is called
drawArea.clearRect(0, 0, canvasBody.width, canvasBody.height);
drawArea.font = "60px cursive";
// Draw the characters to the canvas
drawArea.fillText(chars, canvasBody.width / 2.3, canvasBody.height / 2);
if (count < words.length)
setTimeout(draw, pause);
}
//function renderDraw() {
// setTimeout(function () {
// draw();
// $('#canvas').fadeOut(1000);
// }, timer);
//
//}<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Web Animation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#loadingMessage
{
font-size: 50px;
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
</style>
<script>
var timer = 2000;
var words = "Hello";
var count = -1;
var pause = 300; // ms to wait before drawing next character
var chars;
const opts = {
particleColor: "rgb(50,50,50)",
lineColor: "rgb(75,75,75)",
particleAmount: 100,
defaultSpeed: 0.5,
variantSpeed: 0.5,
defaultRadius: 1,
variantRadius: 3,
linkRadius: 100
};
window.onload = onAllAssetsLoaded;
document.write("<div id='loadingMessage'>Loading...</div>");
function onAllAssetsLoaded()
{
// stopAndHide the webpage loading message
document.getElementById('loadingMessage').style.visibility = "hidden";
//declare for each brush
canvasBody = document.getElementById("canvas");
drawArea = canvasBody.getContext("2d");
canvasBody.width = window.innerWidth;
canvasBody.height = window.innerHeight;
// cv = document.getElementById("canvas");
// br = cv.getContext("2d");
// cv.width = window.innerWidth;
// cv.height = window.innerHeight;
renderCanvas();
}
function renderCanvas()
{
draw();
renderBackground();
}
</script>
<script src="js/test.js" type="text/javascript"></script>
<script src="js/bg.js" type="text/javascript"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<!--
<canvas id="text2"></canvas>
<canvas id="text3"></canvas>-->
<!-- <script src="js/test.js" type="text/javascript"></script>
<script src="js/test2.js" type="text/javascript"></script>
<script src="js/test3.js" type="text/javascript"></script>-->
</body>
</html>
这是我的主要脚本/ html：
<head>
<script>
var timer = 2000;
var words = "Hello";
var count = -1;
var pause = 300; // ms to wait before drawing next character
var chars;
const opts = {
particleColor: "rgb(50,50,50)",
lineColor: "rgb(75,75,75)",
particleAmount: 100,
defaultSpeed: 0.5,
variantSpeed: 0.5,
defaultRadius: 1,
variantRadius: 3,
linkRadius: 100
};
window.onload = onAllAssetsLoaded;
document.write("<div id='loadingMessage'>Loading...</div>");
function onAllAssetsLoaded()
{
// stopAndHide the webpage loading message
document.getElementById('loadingMessage').style.visibility = "hidden";
//declare for each brush
canvasBody = document.getElementById("canvas");
drawArea = canvasBody.getContext("2d");
canvasBody.width = window.innerWidth;
canvasBody.height = window.innerHeight;
renderCanvas();
}
function renderCanvas()
{
draw();
renderBackground();
}
</script>
<script src="js/test.js" type="text/javascript"></script>
<script src="js/bg.js" type="text/javascript"></script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
draw（）函数：
function draw() {
count++;
drawArea.fillStyle = "white";
// Grab all the characters up to count
chars = words.substr(0, count);
// Clear the canvas each time draw is called
drawArea.clearRect(0, 0, canvasBody.width, canvasBody.height);
drawArea.font = "60px cursive";
// Draw the characters to the canvas
drawArea.fillText(chars, canvasBody.width / 2.3, canvasBody.height / 2);
if (count < words.length)
setTimeout(draw, pause);
}
和renderBackground（）;
let resizeReset = function () {
w = canvasBody.width = window.innerWidth;
h = canvasBody.height = window.innerHeight;
};
window.addEventListener("resize", function () {
deBouncer();
});
let deBouncer = function () {
clearTimeout(tid);
tid = setTimeout(function () {
resizeReset();
}, delay);
};
let checkDistance = function (x1, y1, x2, y2) {
return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
};
let linkPoints = function (point1, hubs) {
for (let i = 0; i < hubs.length; i++) {
let distance = checkDistance(point1.x, point1.y, hubs[i].x, hubs[i].y);
let opacity = 1 - distance / opts.linkRadius;
if (opacity > 0) {
drawArea.lineWidth = 0.5;
drawArea.strokeStyle = `rgba(${rgb[0]}, ${rgb[1]}, ${
rgb[2]
}, ${opacity})`;
drawArea.beginPath();
drawArea.moveTo(point1.x, point1.y);
drawArea.lineTo(hubs[i].x, hubs[i].y);
drawArea.closePath();
drawArea.stroke();
}
}
};
Particle = function (xPos, yPos) {
this.x = Math.random() * w;
this.y = Math.random() * h;
this.speed = opts.defaultSpeed + Math.random() * opts.variantSpeed;
this.directionAngle = Math.floor(Math.random() * 360);
this.color = opts.particleColor;
this.radius = opts.defaultRadius + Math.random() * opts.variantRadius;
this.vector = {
x: Math.cos(this.directionAngle) * this.speed,
y: Math.sin(this.directionAngle) * this.speed
};
this.update = function () {
this.border();
this.x += this.vector.x;
this.y += this.vector.y;
};
this.border = function () {
if (this.x >= w || this.x <= 0) {
this.vector.x *= -1;
}
if (this.y >= h || this.y <= 0) {
this.vector.y *= -1;
}
if (this.x > w)
this.x = w;
if (this.y > h)
this.y = h;
if (this.x < 0)
this.x = 0;
if (this.y < 0)
this.y = 0;
};
this.draw = function () {
drawArea.beginPath();
drawArea.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
drawArea.closePath();
drawArea.fillStyle = this.color;
drawArea.fill();
};
};
function setup() {
particles = [];
resizeReset();
for (let i = 0; i < opts.particleAmount; i++) {
particles.push(new Particle());
}
window.requestAnimationFrame(loop);
}
function loop() {
window.requestAnimationFrame(loop);
drawArea.clearRect(0, 0, w, h);
for (let i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].draw();
}
for (let i = 0; i < particles.length; i++) {
linkPoints(particles[i], particles);
}
}
let delay = 200,
tid,
rgb = opts.lineColor.match(/\d+/g);
function renderBackground() {
// delayInMilliseconds = 2000;
// setTimeout(function () {
// $("#canvas").hide(0).fadeIn(4000);
resizeReset();
setup();
// }, delayInMilliseconds);
}