画布drawImage大小错误

时间:2015-06-15 10:06:52

标签: javascript css3 canvas drawimage

我有以下html:

        <div id="container">
            <canvas id="canvas"></canvas>
        </div>
        <img src="sprites/total.png">

用这个css

#container {
    height: 515px;
    width: 1200px;
    margin: auto;
    border: 6px rgba(109, 53, 10, 0.52) groove;
}
#canvas {
    height: 100%;
    width: 100%;
/*  background-image:url(images/tile.png); */
}

我使用javascript:

将我的图片插入画布
var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

    var total = new Image();
    total.src = 'sprites/total.png';
    total.addEventListener('load', function() {
        context.drawImage(this, 0, 0);
    }, false);

但是,画布内的图像大小比实际大小要大...... here is a link to the page itself

全部谢谢

0 个答案:

没有答案