admin管理员组

文章数量:1345466

I was recently following on the free code camp Javascript Self-Driving Car course and got to about 41:50 without any major issues, but when I got to making the inner road lines dashed, the function ctx.setLineDash([20,20]); just wasn't working. What I had so far was drawing solid lines perfectly fine but when I put that statement in, it wouldn't draw any lines.

I tried to put the line in different places like after the beginPath statement, but nothing was working. Here is the code that I have so far

Road.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 <= this.laneCount; i++) {
      const x = lerp(
        this.left,
        this.right,
        i/this.laneCount
      )
      if (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;
}

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);
 }

Html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css">
    <title>Self-Driving Car</title>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script src="road.js"></script>
    <script src="main.js"></script>
  </body>
</html>

Css

body {
    margin: 0;
    background: darkgrey;
    overflow: hidden;
    text-align: center;
}

#myCanvas {
    background: lightgray;
}

I was recently following on the free code camp Javascript Self-Driving Car course and got to about 41:50 without any major issues, but when I got to making the inner road lines dashed, the function ctx.setLineDash([20,20]); just wasn't working. What I had so far was drawing solid lines perfectly fine but when I put that statement in, it wouldn't draw any lines.

I tried to put the line in different places like after the beginPath statement, but nothing was working. Here is the code that I have so far

Road.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 <= this.laneCount; i++) {
      const x = lerp(
        this.left,
        this.right,
        i/this.laneCount
      )
      if (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;
}

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);
 }

Html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css">
    <title>Self-Driving Car</title>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script src="road.js"></script>
    <script src="main.js"></script>
  </body>
</html>

Css

body {
    margin: 0;
    background: darkgrey;
    overflow: hidden;
    text-align: center;
}

#myCanvas {
    background: lightgray;
}
  • javascript
  • canvas
Share Improve this question edited 2 days ago ResistingGuide4 asked 2 days ago ResistingGuide4ResistingGuide4 113 bronze badges New contributor ResistingGuide4 is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 5
  • How are you using/calling this class and methods? Please edit your question to include a minimal reproducible example. – mykaf Commented 2 days ago
  • Does this work? – ResistingGuide4 Commented 2 days ago
  • I can see three white dashed vertical lines in the middle of a lightgray road. – mykaf Commented 2 days ago
  • That's weird. I copied over the example I made. It still didn't work but ctx.getLineDash() was returning [20,20] – ResistingGuide4 Commented 2 days ago
  • Nevermind, got it. The const infinity was too big for it to handle. – ResistingGuide4 Commented 2 days ago
Add a comment  | 

1 Answer 1

Reset to default 0

The constant variable infinity is too large for it to handle. Lowering it to 1,000,000 works fine.

本文标签： javascriptWhy is Html Canvas setLineDash not workingStack Overflow

版权声明：本文标题：javascript - Why is Html Canvas setLineDash not working? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743812912a2543400.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。