畫布周圍不需要的邊框

Question

我在畫布上寫文字並畫一條線。不知怎的，我結束了在我的畫布不必要的邊界：

首先，我寫在右上角的文本，並呼籲context.save()，然後我劃清界線，並呼籲context.stroke()。

代碼：

$(document).ready(function() { 
    var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'); 

    context.beginPath(); 
    context.rect(0, 0, canvas.width, canvas.height); 
    context.fillStyle = 'black'; 
    context.fill(); 

    paintName(context, canvas); 
    drawLine(context); 
}); 



function paintName(context, canvas) { 

    context.textAlign = "left"; 
    context.font = "16pt Arial"; 
    context.fillStyle = 'red'; 
    context.fillText('G5', context.canvas.width - 35, 18); 
    context.strokeStyle = 'red'; 

    context.save(); 
} 

function drawLine(context){ 
    var gatingCoords = [[30, 120], [50, 300]]; 
    var nextX, nextY, pointX, pointy; 

    context.lineWidth = 4; 

    for (var i = 0; i < gatingCoords.length; i++) { 

     pointX = gatingCoords[i][0]; 
     pointY = gatingCoords[i][1]; 


     if (i === gatingCoords.length - 1) { 
      nextX = gatingCoords[0][0]; 
      nextY = gatingCoords[0][1]; 
     } else { 
      nextX = gatingCoords[i + 1][0]; 
      nextXY = gatingCoords[i + 1][1]; 
     } 

     context.moveTo(pointX, pointY); 
     context.lineTo(nextX, nextY); 
    } 

    context.stroke(); 
} 

和小提琴是here。這是怎麼發生的？

Answer 1

邊界來自context.rect（0，0，canvas.width，canvas.height）。如果在paintName（context，canvas）之前添加另一個context.beginPath（），則邊框將消失。

Answer 2

問題是我沒有使用context.beginPath（）;之前moveTo()即

context.beginPath(); 
    context.moveTo(pointX, pointY); 
    context.lineTo(nextX, nextY); 
    context.stroke(); 

Answer 3

希望這會對你有所幫助。

在drawLine功能，添加行context.beginPath();

https://www.w3schools.com/tags/canvas_beginpath.asp