Javascript 如何在HTML画布的边框周围放置一条线？

我想在我的HTML画布上添加一个边框，我想下面的代码可以做到这一点

问题：如何在代码和HTML代码中的画布周围放置边框>

代码：

下面的代码是整个HTML文件。它没有那么大，所以我只是把它全贴进去了

代码：

第4章示例1：图像基础
addEventListener（'load'，eventWindowLoaded，false）；
函数eventWindowLoaded（）{
canvasApp（）；
}
功能画布支持（）{
返回现代化画布；
}
函数canvasApp（）{
如果（！canvasSupport（））{
返回；
}否则{
var theCanvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
context.fillStyle='red'；
context.strokeStyle='black'；
context.font='20pt Verdana'；
context.fillText（'Some text'，50,50）；
strokeText（'Some text'，50,50）；
context.fill（）；
stroke（）；
}
var spaceShip=新图像（）；
spaceShip.src=“ship1.png”；
spaceShip.addEventListener（'load'，eventShipLoaded，false）；
函数eventshipploaded（）{
纱窗（）；
}
函数drawScreen（）{
背景。drawImage（宇宙飞船，10，10）；
背景。drawImage（太空船，50，50）；
背景。drawImage（宇宙飞船，150，50）；
}
}
您的浏览器不支持HTML 5画布。

您可以使用CSS。这里有一个例子

或内联：

<canvas id="canvas" width="500" height="500" style="border: 1px solid black;">
    Your browser does not support the HTML 5 Canvas. 
</canvas>

您的浏览器不支持HTML 5画布。

您应该能够通过CSS添加边框，就像使用CSS添加边框一样：

<canvas style="border:1px solid #000000;" widt...

---

如果要在画布中嵌入边框，只需调用：

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


设置
strokeStyle
和可选的
lineWidth
后。在这种情况下，每次清除画布时都必须更新边框

如果您只是希望画布周围有一个边框，并且作为画布位图本身的一部分并不重要（如果您想保存图像），只需将CSS应用于画布元素：

theCanvas.style.border = '1px solid #000'; // adjust as needed


或者直接使用标签中的CSS样式或作为CSS规则。


如果使用
getBoundingClientRect（）
，

天哪，我花了很长时间才弄明白，谢谢你的回答！
<canvas style="border:1px solid #000000;" widt...

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

theCanvas.style.border = '1px solid #000'; // adjust as needed