Question

我之前成功地设法使用了画布，但我之前使用的相同代码突然只是绘制了部分图像。

HTML：

<canvas id="card-texture-canvas"></canvas>
<img src="http://i.imgur.com/VaN8wBY.png" id="background">
<button class="save">Save</button>

JS：

$('.save').click(function () {
    var d_canvas = document.getElementById('card-texture-canvas')
    var context = d_canvas.getContext('2d')
    var background = document.getElementById('background')
    context.drawImage(background, 0, 0)
    $('#background').hide()
})

使用CSS我强制它是正确的宽度和高度：

#card-texture-canvas {
    height: 297px;
    width: 200px;
}

但是图像的绘制完全忽略了这一点，而是保存了图像的右上角，将其拉伸到一个奇怪的比例（300x150;仍然不是我尝试在CSS中建立的），并将其保留在该...

我做错了什么？

Answer 1

标准画布尺寸为150x100，CSS将拉伸到所需尺寸，但它上面仍有150x100的绘图点，因此您必须将其尺寸设置为内联

<canvas width="297" height="200"></canvas>

或使用javascript：

document.getElementById('card-texture-canvas').width = 297
document.getElementById('card-texture-canvas').height = 200

Canvas只保存部分图像并将其拉伸出奇怪

1 个答案: