如何在HTML画布的边框周围放一条线？
提问于 2014-03-20 17:37:21
我想在HTML画布中添加一个边框，并认为下面的代码可以做到这一点。
问题:如何在代码和HTML code>中围绕画布放置边框？
代码：
context.fillStyle = 'red';
context.strokeStyle = 'black';下面的代码是整个HTML文件。它没有那么大，所以我把它都粘上了。
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chapter 4 Example 1: Image Basics</title>
<script src="modernizr.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp(){
if (!canvasSupport()) {
return;
}else{
var theCanvas = document.getElementById('canvas');
var context = theCanvas.getContext('2d');
context.fillStyle = 'red';
context.strokeStyle = 'black';
context.font = '20pt Verdana';
context.fillText('Some text', 50, 50);
context.strokeText('Some text', 50, 50);
context.fill();
context.stroke();
}
var spaceShip=new Image();
spaceShip.src="ship1.png";
spaceShip.addEventListener('load', eventShipLoaded , false);
function eventShipLoaded() {
drawScreen();
}
function drawScreen() {
context.drawImage(spaceShip, 10, 10);
context.drawImage(spaceShip, 50, 50);
context.drawImage(spaceShip, 150, 50);
}
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
Your browser does not support the HTML 5 Canvas.
</canvas>
</div>
</body>
</html>
回答 3
Stack Overflow用户
发布于 2014-03-20 17:40:22
你可以用CSS。下面是一个例子。http://jsfiddle.net/amER5/1/
#canvas {
height: 100px;
width: 100px;
border: 1px solid blue;
} 或内联：
<canvas id="canvas" width="500" height="500" style="border: 1px solid black;">
Your browser does not support the HTML 5 Canvas.
</canvas>Stack Overflow用户
发布于 2014-03-20 20:08:22
如果您想将边框嵌入到画布中，那么只需调用：
ctx.strokeRect(0, 0, theCanvas.width, theCanvas.height);在设置strokeStyle和可选的lineWidth之后。在这种情况下，每次清除画布时都必须更新边框。
如果您只是希望在画布周围有一个边框，并且成为画布位图本身的一部分并不重要(如果您想保存图像)，那么只需将CSS应用于画布元素：
theCanvas.style.border = '1px solid #000'; // adjust as needed或者直接在标记中使用CSS样式或作为CSS规则。
我建议将父元素(使用CSS规则)上的边框设置为边框(和填充)，如果用getBoundingClientRect()进行调整，则会影响鼠标位置。
Stack Overflow用户
发布于 2014-03-20 17:43:21
您应该能够通过CSS添加边框，就像在任何CSS中添加边框一样：
<canvas style="border:1px solid #000000;" widt...内嵌应该可以。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22548618
复制
腾讯云开发者
