Недавно я следил за бесплатным кодовым лагерем JavaScript Car Cour, и добрался до 41:50 без каких-либо серьезных проблем, но когда я добрался до того, чтобы сделать разбитые внутренние дорожные линии, функция Ctx.setlinedash ([20,20]); просто не работала. То, что у меня было до сих пор, было нарисовало сплошные линии совершенно нормально, но когда я вкладывал это утверждение, оно не нарисовало бы никаких линий. Вот код, который у меня есть до сих пор < /p>
rower.js
class Road {
constructor(x, width, laneCount = 3) {
this.x = x;
this.width = width;
this.laneCount = laneCount;
this.left = x - width / 2;
this.right = x + width / 2;
const infinity = 1000000000;
this.top = -infinity;
this.bottom = infinity;
}
draw(ctx) {
ctx.lineWidth = 5;
ctx.strokeStyle = "white";
for (let i = 0; i 0 && i < this.laneCount) {
ctx.setLineDash([20,20]);
} else {
ctx.setLineDash([])
}
ctx.beginPath();
ctx.moveTo(x, this.top);
ctx.lineTo(x, this.bottom);
ctx.stroke();
}
}
}
function lerp(A, B, t) {
return A + (B-A)*t;
}
< /code>
main.js
const canvas = document.getElementById("myCanvas");
canvas.height = window.innerHeight;
canvas.width = 200;
const ctx = canvas.getContext("2d");
const road = new Road(canvas.width / 2, canvas.width * 0.9, 4);
animate();
function animate() {
canvas.height = window.innerHeight;
road.draw(ctx);
requestAnimationFrame(animate);
}
< /code>
html < /p>
Self-Driving Car
< /code>
css < /p>
body {
margin: 0;
background: darkgrey;
overflow: hidden;
text-align: center;
}
#myCanvas {
background: lightgray;
}
Подробнее здесь: https://stackoverflow.com/questions/795 ... ot-working
