logo标签列表

如何在HTML画布的边框周围加一条线？

javascripthtmlcanvas
15

我想在我的HTML CANVAS上添加边框，认为以下代码可以实现。

问题：如何在代码和HTML代码中给画布加边框？

代码：

    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个回答
27

你可以使用 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>
25
如果你想在画布中嵌入边框，只需调用以下代码：

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

演示

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

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

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

演示

或者直接使用CSS样式标签或CSS规则。
演示

我建议更好的方法是在父元素上设置边框（使用CSS规则），因为边框（和填充）可能会影响鼠标位置，如果使用getBoundingClientRect()进行调整。
演示

我花了很长时间才弄明白这个问题，感谢你的答案！ - Ulf Aslak
1

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

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

内联应该可以。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接