在畫布HTML5中為ctx.drawImage（）添加邊框

Question

我正在制作一個激勵人心的模因生成器，需要在畫布中添加的圖像上添加白色邊框

ctx.drawImage(img, 0, 0, imgWidth, imgHeight, 20, 20,300,300);

這是在畫布上添加邊框

ctx.strokeStyle = 'red';
ctx.lineWidth = 2;

ctx.strokeRect(0, 0, theCanvas.width, theCanvas.height);

如何在內部圖像添加邊框？

這些是坐標：

     ctx.drawImage(img, 0, 0, imgWidth,imgHeight, (canvas.width - newImgWidth) / 2, 20,newImgWidth,newImgHeight);

     newImgWidth,newImgHeight > 80% of imgWidth,imgHeight

Answer 1

嘗試這個：

ctx.strokeRect(1, 1, theCanvas.width - 2, theCanvas.height - 2);

您使用的是兩像素寬的線。 您必須考慮指定矩形中線條的粗細。 您可能希望線的粗細全部到達矩形的內部（這在很多時候會很方便），但是線的粗細會在指定的0厚度數學周長的兩側平均分配長方形。