如何在画布周围绘制边框

Question

我在白色背景颜色的画布上绘制图像。我想在画布周围画一个边框，我无法这样做。这是我的代码：

canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.fillStyle = "black";
context.font = "50px Arial";
context.fillText(chartId, 0, 50);
context.drawImage(image, 0, 0);
context.globalCompositeOperation = "destination-over";
context.fillStyle = "#FFFFFF";
context.fillRect(0,0,canvas.width,canvas.height);//for white background

在此之后我想在整个画布周围出现一个红色边框。

Answer 1

将context.lineWidth设置为2，将context.strokeStyle设置为#FF0000"，然后使用context.strokeRect，而不是fillRect。 globalCompositeOperation如果设置为destination-over，则新应用的内容将使用画布的值，因此更改为source-over。使用lightblue假冒代码中的drawImage

＆＃13;

＆＃13;

var canvas = document.getElementById('cv');
canvas.width = 400;
canvas.height = 300;
var context = canvas.getContext('2d');
context.fillStyle = "black";
context.font = "50px Arial";
context.fillText('ASD', 0, 50);
context.globalCompositeOperation = "destination-over";
context.fillStyle = "#00FFFF";
context.fillRect(0,0,canvas.width,canvas.height);//for white background
context.globalCompositeOperation = "source-over";
context.lineWidth = 2;
context.strokeStyle="#FF0000";
context.strokeRect(0, 0, canvas.width, canvas.height);//for white background

＆＃13;

<canvas id="cv"></canvas>

＆＃13;

＆＃13;

＆＃13;