Question

我想为我的HTML CANVAS添加一个边框，并认为以下代码可以做到这一点。

问题：如何在代码和HTML代码中为Canvas添加边框＆gt;

代码：

    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>

Answer 1

你可以使用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>

Answer 2

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

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

<强> Demo

设置strokeStyle和可选lineWidth后

。在这种情况下，每次清除画布时都必须更新边框。

如果你只想在画布周围画一个边框，那么将它作为画布'位图本身的一部分并不重要（如果你想保存图像），只需将CSS应用到画布元素：

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

<强> Demo

或直接使用标记中的CSS样式或CSS规则的 Demo

我建议使用 parent 元素设置边框（使用CSS规则），因为如果使用getBoundingClientRect()进行调整，边框（和填充）会影响鼠标位置。
的 Demo

Answer 3

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

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

内联应该这样做。

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

3 个答案: