Блог

Главная - Вопросы по программированию - Рисование на холсте HTML5 разноцветных линий

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

#html #colors #canvas #line

#HTML #Цвет #холст #строка

Вопрос:

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

 <html&&t;
<head&&t;
<script type="application/javascript"&&t;
  function draw() {
    var canvas = document.&etElementById('canvas');
    var ctx = canvas.&etContext('2d');
    // draw a 10 pix &reen 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&&t;
  </head&&t;
  <body onload="draw()"&&t;
    <div&&t;<canvas id="canvas" width="1000" hei&ht="1000"&&t;</canvas&&t;</div&&t;
  </body&&t;
  </html&&t;

Ответ №1:

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

Комментарии:

1. Есть ли более эффективный способ нарисовать много разноцветных линий? Я рисую около 5000 на кадр, и если я сделаю все это одним контуром, я смогу легко запускать его со скоростью 50 кадров в секунду. Но если я создам для каждой из них отдельный путь, чтобы я мог перекрашивать их по своему усмотрению, скорость будет достигать 15 кадров в секунду. (Возможно, вы думаете, что это заслуживает отдельного вопроса?)

2. @Auh Вы пробовали объединять строки одного цвета в один и тот же путь?

3. На самом деле, после некоторого тестирования я обнаружил, что если у меня нет никаких теневых пятен на линиях, все работает отлично. Теперь у меня возникла другая проблема.