javascript - 尝试缩放无法正常工作的 Canvas 图像

Question

我正在尝试缩放 Canvas 图像。这是我正在使用的功能。

<script language="javascript">
$('#zoomin').click(function(){
    var canvasWidth=canvas.width;
    var canvasHeight=canvas.height;
    canvas.width=canvasWidth*1.5;
    canvas.height=canvasHeight*1.5;
    context.scale(1.5,1.5);
});
</script>

但问题是图像正在缩放，但背景图像没有被缩放。

请看这张图片。

更新

这是我的 paint.js

colorPurple = {
    r: 203,
    g: 53,
    b: 148
};
var colorGreen = {
    r: 101,
    g: 155,
    b: 65
};
var colorYellow = {
    r: 255,
    g: 207,
    b: 51
};
var colorBrown = {
    r: 152,
    g: 105,
    b: 40
};
var context;

canvasWidth = 500;
canvasHeight = 500;
var myColor=colorYellow;
console.log(myColor);
var curColor = myColor;
var outlineImage = new Image();
var swatchImage = new Image();
var backgroundImage = new Image();
var swatchStartX = 18;
var swatchStartY = 19;
var swatchImageWidth = 93;
var swatchImageHeight = 46;
var drawingAreaX = 0;
var drawingAreaY = 0;
var drawingAreaWidth = 500;
var drawingAreaHeight = 500;
var colorLayerData;
var outlineLayerData;
var totalLoadResources = 3;
var curLoadResNum = 0;

// Clears the canvas.
 function clearCanvas() {

    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
};

// Draw a color swatch
 function drawColorSwatch(color, x, y) {

    context.beginPath();
    context.arc(x + 46, y + 23, 18, 0, Math.PI * 2, true);
    context.closePath();
    if (curColor === color) {
        context.drawImage(swatchImage, 0, 0, 59, swatchImageHeight, x, y, 59, swatchImageHeight);
    } else {
        context.drawImage(swatchImage, x, y, swatchImageWidth, swatchImageHeight);
    }
    context.fillStyle = "rgb(" + color.r + "," + color.g + "," + color.b + ")";
    context.fill();


};

// Draw the elements on the canvas
function redraw() {

    var locX,
        locY;

    // Make sure required resources are loaded before redrawing
    if (curLoadResNum < totalLoadResources) {
        return;
    }

    clearCanvas();

    // Draw the current state of the color layer to the canvas
    context.putImageData(colorLayerData, 0, 0);

    // Draw the background
    context.drawImage(backgroundImage, 0, 0, canvasWidth, canvasHeight);

    // Draw the color swatches
    locX = 0;
    locY = 19;
    //drawColorSwatch(colorPurple, locX, locY);

    locY += 46;
    //drawColorSwatch(colorGreen, locX, locY);

    locY += 46;
    //drawColorSwatch(colorYellow, locX, locY);

    locY += 46;
    //drawColorSwatch(colorBrown, locX, locY);

    // Draw the outline image on top of everything. We could move this to a separate 
    //   canvas so we did not have to redraw this everyime.
    context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
};

 function matchOutlineColor(r, g, b, a) {

    return (r + g + b < 100 && a === 255);
};

function matchStartColor(pixelPos, startR, startG, startB) {

    var r = outlineLayerData.data[pixelPos],
        g = outlineLayerData.data[pixelPos + 1],
        b = outlineLayerData.data[pixelPos + 2],
        a = outlineLayerData.data[pixelPos + 3];

    // If current pixel of the outline image is black
    if (matchOutlineColor(r, g, b, a)) {
        return false;
    }

    r = colorLayerData.data[pixelPos];
    g = colorLayerData.data[pixelPos + 1];
    b = colorLayerData.data[pixelPos + 2];

    // If the current pixel matches the clicked color
    if (r === startR && g === startG && b === startB) {
        return true;
    }

    // If current pixel matches the new color
    if (r === curColor.r && g === curColor.g && b === curColor.b) {
        return false;
    }

    return true;
};

 function colorPixel(pixelPos, r, g, b, a) {

    colorLayerData.data[pixelPos] = r;
    colorLayerData.data[pixelPos + 1] = g;
    colorLayerData.data[pixelPos + 2] = b;
    colorLayerData.data[pixelPos + 3] = a !== undefined ? a : 255;
};

 function floodFill(startX, startY, startR, startG, startB) {
    var newPos,
        x,
        y,
        pixelPos,
        reachLeft,
        reachRight,
        drawingBoundLeft = drawingAreaX,
        drawingBoundTop = drawingAreaY,
        drawingBoundRight = drawingAreaX + drawingAreaWidth - 1,
        drawingBoundBottom = drawingAreaY + drawingAreaHeight - 1,
        pixelStack = [[startX, startY]];

    while (pixelStack.length) {

        newPos = pixelStack.pop();
        x = newPos[0];
        y = newPos[1];

        // Get current pixel position
        pixelPos = (y * canvasWidth + x) * 4;

        // Go up as long as the color matches and are inside the canvas
        while (y >= drawingBoundTop && matchStartColor(pixelPos, startR, startG, startB)) {
            y -= 1;
            pixelPos -= canvasWidth * 4;
        }

        pixelPos += canvasWidth * 4;
        y += 1;
        reachLeft = false;
        reachRight = false;

        // Go down as long as the color matches and in inside the canvas
        while (y <= drawingBoundBottom && matchStartColor(pixelPos, startR, startG, startB)) {
            y += 1;

            colorPixel(pixelPos, curColor.r, curColor.g, curColor.b);

            if (x > drawingBoundLeft) {
                if (matchStartColor(pixelPos - 4, startR, startG, startB)) {
                    if (!reachLeft) {
                        // Add pixel to stack
                        pixelStack.push([x - 1, y]);
                        reachLeft = true;
                    }
                } else if (reachLeft) {
                    reachLeft = false;
                }
            }

            if (x < drawingBoundRight) {
                if (matchStartColor(pixelPos + 4, startR, startG, startB)) {
                    if (!reachRight) {
                        // Add pixel to stack
                        pixelStack.push([x + 1, y]);
                        reachRight = true;
                    }
                } else if (reachRight) {
                    reachRight = false;
                }
            }

            pixelPos += canvasWidth * 4;
        }
    }
};

// Start painting with paint bucket tool starting from pixel specified by startX and startY
 function paintAt(startX, startY) {

    var pixelPos = (startY * canvasWidth + startX) * 4,
        r = colorLayerData.data[pixelPos],
        g = colorLayerData.data[pixelPos + 1],
        b = colorLayerData.data[pixelPos + 2],
        a = colorLayerData.data[pixelPos + 3];

    if (r === curColor.r && g === curColor.g && b === curColor.b) {
        // Return because trying to fill with the same color
        return;
    }

    if (matchOutlineColor(r, g, b, a)) {
        // Return because clicked outline
        return;
    }

    floodFill(startX, startY, r, g, b);

    redraw();
};

// Add mouse event listeners to the canvas
 function createMouseEvents() {

    $('#canvas').mousedown(function (e) {
        // Mouse down location
        var mouseX = e.pageX - this.offsetLeft,
            mouseY = e.pageY - this.offsetTop;

        if (mouseX < drawingAreaX) { // Left of the drawing area
            if (mouseX > swatchStartX) {
                if (mouseY > swatchStartY && mouseY < swatchStartY + swatchImageHeight) {
                    curColor = colorPurple;
                    redraw();
                } else if (mouseY > swatchStartY + swatchImageHeight && mouseY < swatchStartY + swatchImageHeight * 2) {
                    curColor = colorGreen;
                    redraw();
                } else if (mouseY > swatchStartY + swatchImageHeight * 2 && mouseY < swatchStartY + swatchImageHeight * 3) {
                    curColor = colorYellow;
                    redraw();
                } else if (mouseY > swatchStartY + swatchImageHeight * 3 && mouseY < swatchStartY + swatchImageHeight * 4) {
                    curColor = colorBrown;
                    redraw();
                }
            }
        } else if ((mouseY > drawingAreaY && mouseY < drawingAreaY + drawingAreaHeight) && (mouseX <= drawingAreaX + drawingAreaWidth)) {
            paintAt(mouseX, mouseY);
        }
    });
};

resourceLoaded = function () {

    curLoadResNum += 1;
    if (curLoadResNum === totalLoadResources) {
        createMouseEvents();
        redraw();
    }
};

function start() {

    var canvas = document.createElement('canvas');
    canvas.setAttribute('width', canvasWidth);
    canvas.setAttribute('height', canvasHeight);
    canvas.setAttribute('id', 'canvas');
    document.getElementById('canvasDiv').appendChild(canvas);

    if (typeof G_vmlCanvasManager !== "undefined") {
        canvas = G_vmlCanvasManager.initElement(canvas);
    }
    context = canvas.getContext("2d");
    backgroundImage.onload = resourceLoaded();
    backgroundImage.src = "images/t.png";

    swatchImage.onload = resourceLoaded();
    swatchImage.src = "images/o.png";

    outlineImage.onload = function () {
        context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);

        try {
            outlineLayerData = context.getImageData(0, 0, canvasWidth, canvasHeight);
        } catch (ex) {
            window.alert("Application cannot be run locally. Please run on a server.");
            return;
        }
        clearCanvas();
        colorLayerData = context.getImageData(0, 0, canvasWidth, canvasHeight);
        resourceLoaded();
    };
    outlineImage.src = "images/d.png";
};

getColor = function (){

    };

还有我的 CSS

<style>
body{
  width:100%;
  height:auto;
  text-align: center;
}
  .colorpick{
    widh:100%;
    height:atuo;
  }
  .pick{
    display:inline-block;
    width:30px;
    height:30px;  
    margin:5px;
    cursor:pointer;
  }
  canvas{
    border:2px solid silver;
  }
</style>

Answer 1

我能想到的唯一原因是你也错过了重绘背景。

$('#zoomin').click(function(){
    canvasWidth *= 1.5;
    canvasHeight *= 1.5;
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    context.scale(1.5,1.5);
    context.drawImage(backgroundImage, 0, 0, canvasWidth, canvasHeight);
});

您没有向我们展示 HTML/CSS 代码，所以我假设您没有让 CSS 弄乱背景尺寸。

编辑 您原来的 .click() 实现有问题，因为您使用 canvasWidth 和 canvasHeight 声明了 var 关键字，它使这两个变量成为函数的局部变量。因此它们不是全局更新的。请参阅 redraw() 使用这两个变量的地方。它们与正在重绘的背景有关。