我想为我的 HTML CANVAS 添加边框，并认为以下代码可以做到这一点。
问题:如何在代码和 HTML 代码中为 Canvas 添加边框>
代码:
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>
最佳答案
您可以使用 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>
关于javascript - 如何在 HTML Canvas 的边框周围画一条线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22548618/