HTML5 Canvas рисование разноцветных линий - PullRequest
Новая
       15

HTML5 Canvas рисование разноцветных линий

15 голосов
/ 29 августа 2010

Я пытаюсь нарисовать две параллельные линии на холсте, но кажется, что свойства последнего перезаписывают первое.Пожалуйста, предложите, что может быть не так: 

<html>
<head>
<script type="application/javascript">
  function draw() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    // draw a 10 pix green line
    ctx.strokeStyle='#00cc00';
    ctx.lineWidth=10;
    ctx.moveTo(100,0);
    ctx.lineTo(100,1000);
    ctx.stroke();
    // draw a 20 pix red line
    ctx.strokeStyle='#cc0000';
    ctx.lineWidth=20;
    ctx.moveTo(140,0);
    ctx.lineTo(140,1000);
    ctx.stroke();
  }
  </script>
  </head>
  <body onload="draw()">
    <div><canvas id="canvas" width="1000" height="1000"></canvas></div>
  </body>
  </html>

1 Ответ

25 голосов
/ 29 августа 2010

Позвоните ctx.beginPath, прежде чем рисовать каждую линию.Когда сделан сильный вызов stroke, первая строка все еще является частью текущего пути, поэтому она снова отображается в новом цвете.

...