如何将画布大小设置为其背景图像？

Question

我有以下用于画布对象的CSS代码

canvas{
    border: solid black 2px;
    background:url("http://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png");
    background-repeat:no-repeat;
    }

如何使画布的大小等于背景图像的大小？

Answer 1

如果这是一个不变的图像，请使用CSS中的width和height属性。

canvas{
    border: solid black 2px;
    background: url("http://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png");
    background-repeat:no-repeat;
    width: 200px;
    height: 298px;
}

如果这是动态图片，请使用JavaScript。

HTML：

<canvas id="canvas"><img src="dynamic_url" id="dynamic_img" /></canvas>

JS：

function resizeCanvas()
{
    var img = document.getElementById('dynamic_img'); 
    var width = img.clientWidth;
    var height = img.clientHeight;

    var canvas = document.getElementById('canvas'); 
    canvas.style.width = width;
    canvas.style.height = height;
}