Javascript Save（）和Restore（）函数不起作用？ （函数（canvasID，imgID）{ “严格使用”； var画布、ctx、myImg； 变量初始化=函数（）{ canvas=document.getElementById（canvasID）； myImg=document.getElementById（imgID）； ctx=canvas.getContext（'2d'）； }; var renderImg=函数（x，y，w，h，img，mixImg，filter）{ 如果（ctx）{ ctx.drawImage（img，x，y，w，h）； 混合（x，y，w，h，滤波器）； } }; var mixImg=函数（x，y，w，h，过滤器）{ 风险值r、g、b、a、v； var canvasData=ctx.getImageData（x，y，w，h）； 如果（过滤器）{ 开关（过滤器）{ 案例“灰度”： 对于（变量i=0；i

如何镜像我绘制的整个画布（我渲染的4个图像）并将其放置在x:0 y:500上？ 我试着保存我画的每一幅图像，然后在不同的点上进行翻译，然后恢复。

---

但除了我画的4张图片外，什么也没显示。我做错了什么？？？

翻译

仅更改参考点

在

ctx之后，translate（0500）

x=0

位于左上角，而

y=0

位于左下角

您还必须在画布上绘制或放置数据

但是，

getImageData

和

putImageData

不受转换矩阵的影响，因此必须说明，例如：

(function (canvasID, imgID) {
    "use strict";

    var canvas, ctx, myImg;  

    var initialize = function (){

        canvas = document.getElementById(canvasID);
        myImg = document.getElementById(imgID);
        ctx = canvas.getContext('2d');


    };

    var renderImg = function (x, y, w, h, img, mixImg, filter){

        if(ctx) {
            ctx.drawImage(img, x, y, w, h);
            mixImg(x, y, w, h, filter);

        }


    };

    var mixImg = function (x, y, w, h, filter){
        var r, g, b, a, v;
        var canvasData = ctx.getImageData(x, y, w, h);


        if(filter) {

            switch(filter) {
                case 'grayscale':
                    for (var i = 0; i < canvasData.data.length; i+=4){

                            r = canvasData.data[i];
                            g = canvasData.data[i+1];
                            b = canvasData.data[i+2];
                            v = 0.2126*r + 0.7152*g + 0.0722*b;
                            canvasData.data[i] = canvasData.data[i+1] = canvasData.data[i+2] = v;

                    }

                    break;
                case 'retro':
                    for (var i = 0; i < canvasData.data.length; i+=4){

                            r = canvasData.data[i];
                            g = canvasData.data[i+1];
                            b = canvasData.data[i+2];
                            a = canvasData.data[i+3];
                            canvasData.data[i] = r-40;
                            canvasData.data[i+1] = g-50;
                            canvasData.data[i+2] = b+23;
                            canvasData.data[i+3] = 200;

                    }

                    break;

                case 'instagram':
                    for (var i = 0; i < canvasData.data.length; i+=4){

                            r = canvasData.data[i];
                            g = canvasData.data[i+1];
                            b = canvasData.data[i+2];
                            canvasData.data[i] = r+63;
                            canvasData.data[i+1] = g+41;
                            canvasData.data[i+2] = 60;

                    }

                    break;

            } // end of switch
        } // end of if

        ctx.putImageData(canvasData, x, y);

    };



    window.onload = function () {

        initialize();


        if(canvas && canvas.getContext) {
            renderImg(0, 0, 250, 250, myImg, mixImg);
            ctx.save();
            renderImg(250, 0, 250, 250, myImg, mixImg, 'grayscale');
            ctx.save();
            renderImg(0, 250, 250, 250, myImg, mixImg, 'retro');
            ctx.save();
            renderImg(250, 250, 250, 250, myImg, mixImg, 'instagram');
            ctx.save();

            ctx.translate(0, 500);
            ctx.restore();


        }

    };






})('collage', 'img');

或者将数据放入内存画布并使用

drawImage（）

:

当前路径、变换矩阵、阴影属性、全局alpha、剪裁区域和全局合成运算符不得影响getImageData（）和putImageData（）方法

由于您的代码是现在，您也做了一个画+读+重画到同一个地区。您可以使用一个绘图，然后将其用作所有其他绘图的源。也不需要进行保存和恢复

---

编辑： 内存画布如

document.createElement（'canvas'）

中所示。这完全取决于可能的设置方式、目的等

var trans = [0, 500];

ctx.putImageData(
    canvasData,
    x + trans[0],
    y + trans[1]
);

---

你介意解释一下什么是内存画布吗？我在谷歌上搜索过，但没有像你说的那样。

var img = {}, memc = {}, domc = {};

img.src     = document.getElementById(imgId);
img.w       = img.src.width;
img.h       = img.src.height;

/* DOM Canvas */
domc.can    = document.getElementById(canvasId);
domc.ctx    = domc.can.getContext('2d');
domc.width  = img.w * 2; // Going to duplicate image 2 columns.
domc.height = img.h * 4; // Going to duplicate image 4 rows.

/* Memory Canvas */
memc.can    = document.createElement('CANVAS');
memc.ctx    = memc.can.getContext('2d');
memc.width  = img.w;
memc.height = img.h;