Canvas 筆記 2 - 一氣呵成繪製多個線條

這個範例來繪製一個奧雷卡爾克斯的結界，順便回憶一下作弊王武藤遊戲虐死昆蟲專家羽娥的橋段

這奧雷卡爾克斯結界外面還有圓形，可以到之後再畫 XD

window.onload = function() {
  (function(){
    const canvas = document.querySelector('#canvas');
    const context = canvas.getContext('2d');
    context.strokeStyle = '#3EA870';
    context.lineWidth = 10;
    context.beginPath();
    context.moveTo(350, 50);
    context.lineTo(50, 520);
    context.lineTo(650, 200);
    context.lineTo(350, 650);
    context.lineTo(50, 200);
    context.lineTo(650, 500);
    context.closePath();
    context.stroke();
  }())  
}

在這邊可以看到，如果要繪製多個線條的話，在呼叫 context.lineTo 之後還可以繼續呼叫 lineTo這樣子 就可以連續畫多條線段，畫到最後一個點時，可以呼叫 context.closePath 方法把最後一個點連回起始點。

繪製完成版