javascript - 在 Canvas HTML5 中向 ctx.drawImage() 添加边框

Question

我正在制作一个消极的模因生成器，需要为 Canvas 中添加的图像添加白色边框

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

这是给 Canvas 添加边框

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 厚度数学周长的两侧矩形。