0

html画布线的哪些方法可以让我在画线时改变线宽？此示例采用所有线段的最后一个线宽。

<!DOCTYPE HTML>
<html>
  <head>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        context.lineTo(100, 0);
        context.beginPath();
        context.lineWidth = .5;
        context.lineTo(200, 20);        
        context.lineWidth = 1;      
        context.lineTo(100, 40);        
        context.lineWidth = 2;
        context.lineTo(200, 60);
        context.lineWidth = 3;
        context.lineTo(100, 80);        
        context.lineWidth = 4;
        context.lineTo(200, 100);
        context.lineWidth = 5;
        context.lineTo(100, 120);
        context.lineWidth = 6;
        context.lineTo(200, 140);       
        context.lineWidth = 7;
        context.lineTo(100, 160);
        context.lineWidth = 8;
        context.lineTo(200, 180);
        context.lineWidth = 10;
        context.lineTo(100, 200);
        context.stroke();
    </script>
  </body>
</html>
4

1 回答 1

2

打破你的道路。

改变

    context.beginPath();
    context.lineWidth = .5;
    context.lineTo(200, 20);        
    context.lineWidth = 1;      
    context.lineTo(100, 40);
    ...
    context.lineWidth = 10;
    context.lineTo(100, 200);
    context.stroke();

到

    context.beginPath();
    context.lineWidth = .5;
    context.lineTo(200, 20);       
    context.stroke();
    context.beginPath();
    context.lineWidth = 1;      
    context.lineTo(100, 40);
    context.stroke();
    ...
    context.beginPath();
    context.lineWidth = 10;
    context.lineTo(100, 200);
    context.stroke();

当然，如果你把你的段放在一个结构中并循环它们会更干净。

于 2013-07-01T16:29:50.017 回答