canvas設置線條樣式

1. 合法屬性和方法

   lineWidth = value           設置線寬
   lineCap = type              設置線端點樣式
   lineJoin = type             設置線交合處樣式
   setLineDash(segments)       設置虛線
   lineDashOffset = value      設置虛線偏移

2. 設置線寬

   

   const canvas = document.getElementById(‘canvas‘);
   const ctx = canvas.getContext(‘2d‘);
   
   ctx.lineWidth=1;
   ctx.beginPath();
   ctx.moveTo(50, 50);
   ctx.lineTo(100, 50);
   ctx.stroke();
   
   ctx.lineWidth=2;
   ctx.beginPath();
   ctx.moveTo(50, 60);
   ctx.lineTo(100, 60);
   ctx.stroke();
   
   ctx.lineWidth=3;
   ctx.beginPath();
   ctx.moveTo(50, 70);
   ctx.lineTo(100, 70);
   ctx.stroke();
   
   ctx.lineWidth=4;
   ctx.beginPath();
   ctx.moveTo(50, 80);
   ctx.lineTo(100, 80);
   ctx.stroke();
   
   ctx.lineWidth=5;
   ctx.beginPath();
   ctx.moveTo(50, 90);
   ctx.lineTo(100, 90);
   ctx.stroke();
    
   

3. 設置線端點

   

   ctx.beginPath();
   ctx.lineCap="round";
   ctx.lineWidth=10;
   ctx.moveTo(50, 80);
   ctx.lineTo(100, 80);
   ctx.stroke();
   
   ctx.beginPath();
   ctx.lineCap="butt";
   ctx.lineWidth=10;
   ctx.moveTo(50, 100);
   ctx.lineTo(100, 100);
   ctx.stroke();
   
   ctx.beginPath();
   ctx.lineCap="square";
   ctx.lineWidth=10;
   ctx.moveTo(50, 120);
   ctx.lineTo(100, 120);
   ctx.stroke();
    
   

4. 設置線交合

   

   ctx.beginPath();
   ctx.lineWidth=20;
   ctx.lineJoin="round";
   ctx.moveTo(50, 80);
   ctx.lineTo(150, 120);
   ctx.lineTo(250, 80);
   ctx.stroke();
   
   ctx.beginPath();
   ctx.lineWidth=20;
   ctx.lineJoin="bevel";
   ctx.moveTo(50, 150);
   ctx.lineTo(150, 190);
   ctx.lineTo(250, 150);
   ctx.stroke();
   
   ctx.beginPath();
   ctx.lineWidth=20;
   ctx.lineJoin="miter";
   ctx.moveTo(50, 220);
   ctx.lineTo(150, 260);
   ctx.lineTo(250, 220);
   ctx.stroke();
    
   

5. 設置虛線

   

   var offset = 0;
   
   setInterval(() => {
       offset++;
       if (offset > 16) {
           offset = 0;
       }
   
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       ctx.setLineDash([4, 2]);
       ctx.lineDashOffset = -offset;
       ctx.strokeRect(10, 10, 100, 100);
   
   }, 20)

canvas設置線條樣式