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 캔버스 선 두께

답변

관련 문제