Javascript 使用context.putImageData（）仅复制画布的一部分

我试图一块一块地重复填充画布。此外，我希望画布上的一个区域以迭代方式填充原始图像的方块

出于性能原因，我首先将原始图像渲染到屏幕外画布，然后使用getImageData（）获取imagedata

然后，在屏幕画布中，我尝试使用以下代码迭代绘制片段：

        var x = 0;
        var y = 0;
        for (var i = 0; i <= (nbPiecesHorizontal*nbPiecesVertical-1); i++) {

            onscreenContext.putImageData(
                offScreenData.imageData, 
                x*pieceWidth, 
                y*pieceHeight, 
                x*pieceWidth, 
                y*pieceHeight, 
                pieceWidth, 
                pieceHeight);


            // iter
            x = x + 1;
            if (x == (nbPiecesHorizontal)) {
                x = 0;
                y = y +1;
            }
        };

var x=0；
var y=0；
对于（var i=0；i使用
。getImageData
和
。putImageData
是缓慢且昂贵的绘制画布的方法，因为它们在像素级操纵画布

以增量方式将图像绘制到画布的更好方法是使用
context.drawImage
的剪辑版本。drawImage的剪辑版本将剪辑原始图像的指定部分并将其绘制到画布上

使用drawImage要快得多，因为像素只是从源图像复制到目标画布，而不是通过额外的“过滤器”像素操作

以下是drawImage剪辑版的工作原理：

context.drawImage(

    sourceImage,  // the source image to clip from

    sX,           // the left X position to start clipping 
    sY,           // the top Y position to start clipping
    sW,           // clip this width of pixels from the source
    wH,           // clip this height of pixels from the source

    dX,           // the left X canvas position to start drawing the clipped sub-image
    dY,           // the top Y canvas position to start drawing the clipped sub-image
    dW,           // scale sW to dW and draw a dW wide sub-image on the canvas
    dH            // scale sH to dH and draw a dH high sub-image on the canvas

}

示例代码和演示：

context.drawImage(

    sourceImage,  // the source image to clip from

    sX,           // the left X position to start clipping 
    sY,           // the top Y position to start clipping
    sW,           // clip this width of pixels from the source
    wH,           // clip this height of pixels from the source

    dX,           // the left X canvas position to start drawing the clipped sub-image
    dY,           // the top Y canvas position to start drawing the clipped sub-image
    dW,           // scale sW to dW and draw a dW wide sub-image on the canvas
    dH            // scale sH to dH and draw a dH high sub-image on the canvas

}


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var-nextTime=0；
var持续时间=500；
var-nextX=0；
var-nextY=0；
var-cols=5；
var行=3；
变量iw、ih、冷宽、行高；
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg";
函数start（）{
iw=canvas.width=img.width；
ih=画布高度=图像高度；
colWidth=iw/cols；
行高=ih/行；
请求动画帧（动画）；
}
函数动画（时间）{
//检查所用时间是否已达到下一个时间
//如果没有，只需请求另一个动画循环
if（timecols-1）{
nextX=0；
nextY++；
如果（nextY>rows-1）{imageIsComplete=true；}
}
//如果映像不完整，请请求另一个循环
如果（！imageIsComplete）{requestAnimationFrame（animate）；}
如果（imageIsComplete）{alert（'imageIsComplete！'）；}
}
body{背景色：象牙；}
#画布{边框：1px纯红；}
使用
。getImageData
和
。putImageData
是绘制画布的缓慢而昂贵的方法，因为它们在像素级操纵画布

以增量方式将图像绘制到画布的更好方法是使用
context.drawImage
的剪辑版本。drawImage的剪辑版本将剪辑原始图像的指定部分并将其绘制到画布上

使用drawImage要快得多，因为像素只是从源图像复制到目标画布，而不是通过额外的“过滤器”像素操作

以下是drawImage剪辑版的工作原理：

context.drawImage(

    sourceImage,  // the source image to clip from

    sX,           // the left X position to start clipping 
    sY,           // the top Y position to start clipping
    sW,           // clip this width of pixels from the source
    wH,           // clip this height of pixels from the source

    dX,           // the left X canvas position to start drawing the clipped sub-image
    dY,           // the top Y canvas position to start drawing the clipped sub-image
    dW,           // scale sW to dW and draw a dW wide sub-image on the canvas
    dH            // scale sH to dH and draw a dH high sub-image on the canvas

}

示例代码和演示：

context.drawImage(

    sourceImage,  // the source image to clip from

    sX,           // the left X position to start clipping 
    sY,           // the top Y position to start clipping
    sW,           // clip this width of pixels from the source
    wH,           // clip this height of pixels from the source

    dX,           // the left X canvas position to start drawing the clipped sub-image
    dY,           // the top Y canvas position to start drawing the clipped sub-image
    dW,           // scale sW to dW and draw a dW wide sub-image on the canvas
    dH            // scale sH to dH and draw a dH high sub-image on the canvas

}


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var-nextTime=0；
var持续时间=500；
var-nextX=0；
var-nextY=0；
var-cols=5；
var行=3；
变量iw、ih、冷宽、行高；
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg";
函数start（）{
iw=canvas.width=img.width；
ih=画布高度=图像高度；
colWidth=iw/cols；
行高=ih/行；
请求动画帧（动画）；
}
函数动画（时间）{
//检查所用时间是否已达到下一个时间
//如果没有，只需请求另一个动画循环
if（timecols-1）{
nextX=0；
nextY++；
如果（nextY>rows-1）{imageIsComplete=true；}
}
//如果映像不完整，请请求另一个循环
如果（！imageIsComplete）{requestAnimationFrame（animate）；}
如果（imageIsComplete）{alert（'imageIsComplete！'）；}
}
body{背景色：象牙；}
#画布{边框：1px纯红；}
谢谢，这很有意义。我正在尝试的是先使用屏幕外画布来加速填充，从而渲染图像。有没有可能使用drawImage来实现这一点？例如，使用屏幕外画布作为输入而不是原始图像是否有意义？当然！您也可以轻松地完成（并且性能良好）使用屏幕外画布而不是图像。图像或屏幕外（内存中）画布都可以用作drawImage的图像源：
context.drawImage（myOffscreenCanvas…
。无论哪种方式，性能都会很好。祝你的项目好运！谢谢你，这是有意义的。我正在尝试的事情是先使用屏幕外的画布来加速填充碎片，从而渲染图像。有没有可能使用drawImage来实现这一点？例如，使用屏幕外的画布有意义吗n画布作为输入，而不是原始图像？绝对可以！您可以同样轻松地（且有效地）使用屏幕外画布而不是图像。图像或屏幕外（内存中）画布都可以用作drawImage:
context.drawImage的图像源（myOffscreenCanvas…
。无论哪种方式，性能都会很好。祝您的项目好运！