画布周围不需要的边框

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