html 5画布线宽

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

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

来源

2013-07-01 Abe

你必须打破你的路径，调用中风，然后开始一个新的路径。 –

打破你的道路。

变化

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-01 16:29:50

html 5画布线宽

回答

相关问题