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

Question

我有，我有

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

画布对象下面的CSS代码如何使画布等于背景图像的尺寸大小？

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：

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; 
}