javascript - 在javascript中翻转html5画布的一部分

Question

我有一个已绘制的 html5 画布元素。我现在需要水平翻转这个画布的一个矩形部分。

我尝试将选定区域复制到临时画布。我现在需要代码来翻转这个临时画布，然后将其复制回主画布。这是我的代码：

function swapRow(row) {
    var tempCanvas = document.createElement('canvas');
    tempCanvas.id     = "tempCanvas";
    tempCanvas.width  = 384;
    tempCanvas.height = 32;
    var tempContext = tempCanvas.getContext('2d');
    var tempImage = context.getImageData(0, 0, 384, 32);
    tempContext.putImageData(tempImage, 0, 0);

    //need code to flip tempContext
        
    tempImage = tempContext.getImageData(0, 0, 384, 32);
    context.putImageData(tempImage, 0, 0);
}

row 参数将用于决定要翻转哪个矩形区域，为了清楚起见，我省略了这个逻辑。

标签： javascripthtml5-canvas

Answer 1

我已经设法解决了这个问题。

我试图翻转我的临时画布，但我需要做的是从临时画布中获取图像，设置我的缩放选项并将图像粘贴回临时画布。我使用 toDataURL 从画布中获取图像。

function swapRow(row) {
var tempCanvas = document.createElement('canvas');
tempCanvas.id     = "tempCanvas";
tempCanvas.width  = 384;
tempCanvas.height = 384 / width;
var tempContext = tempCanvas.getContext('2d');
var tempImage = context.getImageData(30, 30 + (row * tempCanvas.height), 384, tempCanvas.height);
tempContext.putImageData(tempImage, 0, 0);
    
var myImage = new Image();
myImage.src = tempCanvas.toDataURL("image/png");
tempContext.scale(-1, 1);
tempContext.drawImage(myImage, -383, 0, 384, tempCanvas.height);
    
tempImage = tempContext.getImageData(0, 0, 384, tempCanvas.height);
context.putImageData(tempImage, 30, 30 + (row * tempCanvas.height));

}