javascript - 如何从 src 加载调整大小或拉伸的图像

Question

我在画布中绘制此图像时使用了 fill()。我使用以下代码加载图像：

var cerceve = new Image();
if ($(".cerceve.accessory-selected").length) {
    cerceve.onload = function () {
        cerceveDeferred.resolve();
    };
    cerceve.src = $(".cerceve.accessory-selected:first img").attr("src");

基本上，我定义了src对象，Image然后当它加载时，我开始在屏幕上绘制它。但我希望图像以自定义尺寸加载，我该怎么做？我不能使用调整大小drawImage()，因为我需要使用fill()方法并且它没有指定任何调整大小选项。

例如，如果我cerceve.height = 40;在cerceve加载后设置，它会绘制高度为 40 的图像（40 比原始高度大），但源图像不会被拉伸，而是重复，绘制许多相同的图像。我给它一个自定义高度，并且图像的行为与重复选项一起使用。我想让它伸展。

Answer 1

好，我知道了。与其在加载后尝试调整源图像的大小，不如在画布上绘制图像时使用上下文缩放。context.scale(x,y);可能是要走的路。