Question

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

var canvas = parent.document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.fillStyle = "black";
context.font = "50px Arial";
//context.fillText(chartId, canvas.width-200, 50);
context.drawImage(image, 0, 0);
context.fillStyle = "#000000";
context.rect(0,0,canvas.width,canvas.height);
context.globalCompositeOperation = "destination-over";
context.fillStyle = "#FFFFFF";

但是当我下载此图片时，我看不到任何边框。

Answer 1

你忘了抚摸你的直肠。

context.stroke();

Answer 2

缺少两件事。

是context.stroke();。
您应该开始使用rect()绘制context.beginPath();。这是为了避免下一个笔划也影响您绘制的第一个矩形。

另一种可能的解决方案是使用函数context.strokeRect（）;省去了必须使用isPath（）和stroke（）的麻烦。

    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext('2d');
    context.fillStyle = "black";
    context.font = "50px Arial";
    //context.fillText(chartId, canvas.width-200, 50);
    context.drawImage(image, 0, 0);
    context.fillStyle = "#000000";
    context.beginPath();
    context.rect(0,0,canvas.width,canvas.height);
    context.stroke();
    context.globalCompositeOperation = "destination-over";
    context.fillStyle = "#FFFFFF";

Answer 3

看起来，你不进行context.stroke()操作？

无法在画布上绘制矩形

3 个答案: