Question

我试图在画布上绘制两条平行线，但似乎后者的属性会覆盖前者。请建议可能出现的问题：

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

Answer 1

在绘制每一行之前调用ctx.beginPath。当进行强stroke调用时，第一行仍然是当前路径的一部分，因此它将以新颜色再次绘制。

HTML5 Canvas绘制多彩线条

1 个答案: