我在使用JavaScript和画布相对初学者。 我会试着解释一下我到目前为止已经完成。 我有一个外部的样式表,我已经设置画布元素的背景(它是落后消失在地平线的道路的背景图像)。 我已经然后创建该第一函数(drawRoad())来绘制的白色的道路的中心的薄带,并将其关闭落后与路面地平线。 我已经然后,创建另一个函数(roadLines()),其插入在该白色带空格。 我很高兴与它的外观到这里为止。
我想现在要做的就是通过... drawRoad()循环运行,然后roadLines(),然后清除画布,然后drawRoad()再次,然后更改roadLines(的位置),并再次调用这个函数。 我想移动roadLines的位置()垂直向下,所以它给行驶在路上的效果。 (我希望这是有道理的?)我要对这个正确的方式? 还是有更简单的方法来做到这一点的是,我完全可以俯瞰?
任何建议将不胜感激。 下面是我到目前为止已经完成。 此外,功能动画()是在底部,但它是所有调用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();
}