HTML5 Canvas, рисующий разноцветные линии

Question

HTML5 Canvas, рисующий разноцветные линии

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

<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>

16

html5 colors canvas line

задан dda 17 July 2012 в 16:17

1 ответ

Другие вопросы по тегам:

html5 colors canvas line

Похожие вопросы:

score 25 · Accepted Answer

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