我是使用 javascript 和 canvas 的相对初学者。我将尝试解释我到目前为止所做的事情。我有一个外部样式表,并且我已经设置了画布元素的背景(它是一条延伸到地平线的道路的背景图像)。然后,我创建了第一个函数 (drawRoad()) 以在道路中心绘制一条白色细条,并让它随着道路延伸到地平线。然后我创建了另一个函数(roadLines()),它在这个白色条带中插入空格。到目前为止,我对这里的样子很满意。
我现在要做的就是运行一个循环……drawRoad(),然后roadLines(),然后清除画布,然后再次drawRoad(),然后改变roadLines()的位置,再次调用这个函数. 我想将 roadLines() 的位置垂直向下移动,以便它产生沿着道路行驶的效果。(我希望这是有道理的?)我这样做是否正确?还是有一种我完全忽略的更简单的方法?
任何建议将不胜感激。以下是我到目前为止所做的。此外,函数 animate() 位于底部,但它所做的只是调用 drawRoad(),然后调用 roadLines()。
window.requestAnimFrame = (function (callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1);
};})();
// set function that draws in the canvas
function drawRoad() {
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
ctx.beginPath();
ctx.moveTo(471, 199);
ctx.lineTo(467, 600);
ctx.lineTo(475, 600);
ctx.closePath();
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = "rgb(255, 255, 255)";
}
//set variables and function/for loop that creates the spacing/intervals for road markings and movement
function roadLines() {
var interval = 1;
var space = 1;
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
for (var roadLine = 199; roadLine < 600; roadLine = roadLine + interval) {
interval = (interval * 1.1);
space = (space * 1.05);
ctx.clearRect(450, roadLine, 40, space);
}
}
function animate() {
drawRoad();
roadLines();
}