javascript - Canvas 周围不需要的边框

Question

我在 Canvas 上写文字并画一条线。不知何故，我的 Canvas 周围出现了不需要的边框:

首先我在右上角写下文字并调用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();
}

fiddle 是here .这是怎么回事？

Answer 1

边框来自context.rect(0, 0, canvas.width, canvas.height)。如果您在 paintName(context, canvas) 之前添加另一个 context.beginPath()，那么边框就会消失。