Javascript 画布周围不需要的边框

我在画布上写文字，画一条线。不知怎的，我的画布上有一个不需要的边框：

首先，我在右上角写下文本并调用

context.save（）

，然后画线并调用

context.stroke（）

代码：

$（文档）.ready（函数（）{
var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
context.beginPath（）；
rect（0，0，canvas.width，canvas.height）；
context.fillStyle='black'；
context.fill（）；
paintName（上下文、画布）；
抽绳（上下文）；
});
函数paintName（上下文、画布）{
context.textAlign=“left”；
context.font=“16pt Arial”；
context.fillStyle='red'；
context.fillText（'G5'，context.canvas.width-35,18）；
context.strokeStyle='red'；
context.save（）；
}
函数绘图线（上下文）{
var gatingCoords=[[30,120]，[50,300]；
变量nextX、nextY、pointX、pointy；
context.lineWidth=4；
对于（变量i=0；i

---

而小提琴就是。这是怎么发生的？

问题是我没有使用context.beginPath（）；在

moveTo（）之前，即

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

希望这对你有帮助

在
drawLine
函数中，添加行
context.beginPath（）

边框来自context.rect（0，0，canvas.width，canvas.height）。如果在paintName（context，canvas）之前添加另一个context.beginPath（），则边框将消失。
由于浏览器提供了一些默认边距和填充，您需要重置默认浏览器样式的可能重复项。但是边框在图片上…右键点击并加载，你会在我知道的pngYes上看到它。看看我给你的链接。
    context.beginPath();
    context.moveTo(pointX, pointY);
    context.lineTo(nextX, nextY);
    context.stroke();