Question

在尝试查找Canvas上下文的putImageData（）方法的文档时，我发现了这样的事情：

context.putImageData（imgData，X，Y，dirtyX，dirtyY，dirtyWidth，dirtyHeight）;

（来自http://www.w3schools.com/tags/canvas_putimagedata.asp）

根据我读过的文档，x和y是 source 图像的索引，而dirtyX和dirtyY指定目标画布中绘制图像的位置。然而，正如您将从下面的示例（和JSFiddle）中看到的，对putImageData（imgData，x，y）的调用有效，而putImageData（imgData，0,0，locX，locY）则不然。我不确定为什么。

修改

我想我真正的问题是为什么图像的顶行是黑色的，而且只有7行，而不是8.图像应该从画布的左上角开始。它们从左侧开始（并且有8列）。为什么他们不从头顶开始？

答案：当yLoc为0时，由于此行除以0：

xoff = imgWidth / (yLoc/3);

JSFiddle：

http://jsfiddle.net/WZynM/

代码：

<html>
    <head>
        <title>Canvas tutorial</title>

        <script type="text/javascript">
            var canvas;
            var context; // The canvas's 2d context

            function setupCanvas()
            {
                canvas = document.getElementById('myCanvas');
                if (canvas.getContext)
                {
                    context = canvas.getContext('2d');
                    context.fillStyle = "black";    // this is default anyway
                    context.fillRect(0, 0, canvas.width, canvas.height);
                }
            }

            function init()
            {
                loadImages();
                startGating();
            }

            var images = new Array();
            var gatingTimer;
            var curIndex, imgWidth=0, imgHeight;

                // Load images
            function loadImages()
            {
                for (n = 1; n <= 16; n++)
                {
                    images[n] = new Image();
                    images[n].src = "qxsImages/frame" + n + ".png";
                //  document.body.appendChild(images[n]);

                    console.log("width = " + images[n].width + ", height = " + images[n].height);
                }

                curIndex = 1;
                imgWidth = images[1].width;
                imgHeight = images[1].height;
            }

            function redrawImages()
            {
                if (imgWidth == 0)
                    return;

                curIndex++;
                if (curIndex > 16)
                    curIndex = 1;

                    // To do later: use images[1].width and .height to layout based on image size
                for (var x=0; x<8; x++)
                {
                    for (var y=0; y<8; y++)
                    {
                        //if (x != 1)
                    //      context.drawImage(images[curIndex], x*150, y*100);
                        //  context.drawImage(images[curIndex], x*150, y*100, imgWidth/2, imgHeight/2); // scale
                    //  else
                            self.drawCustomImage(x*150, y*100);
                    }
                }
            }

            function drawCustomImage(xLoc, yLoc)
            {
                    // create a new pixel array
                imageData = context.createImageData(imgWidth, imgHeight);

                pos = 0; // index position into imagedata array
                xoff = imgWidth / (yLoc/3); // offsets to "center"
                yoff = imgHeight / 3;

                for (y = 0; y < imgHeight; y++) 
                {
                    for (x = 0; x < imgWidth; x++) 
                    {
                        // calculate sine based on distance
                        x2 = x - xoff;
                        y2 = y - yoff;
                        d = Math.sqrt(x2*x2 + y2*y2);
                        t = Math.sin(d/6.0);

                        // calculate RGB values based on sine
                        r = t * 200;
                        g = 125 + t * 80;
                        b = 235 + t * 20;

                        // set red, green, blue, and alpha:
                        imageData.data[pos++] = Math.max(0,Math.min(255, r));
                        imageData.data[pos++] = Math.max(0,Math.min(255, g));
                        imageData.data[pos++] = Math.max(0,Math.min(255, b));
                        imageData.data[pos++] = 255; // opaque alpha
                    }
                }

                    // copy the image data back onto the canvas
                context.putImageData(imageData, xLoc, yLoc);        // Works... kinda
            //  context.putImageData(imageData, 0, 0, xLoc, yLoc, imgWidth, imgHeight);  // Doesn't work. Why?
            }


            function startGating()
            {
                gatingTimer = setInterval(redrawImages, 1000/25); // start gating
            }

            function stopGating()
            {
                clearInterval(gatingTimer);
            }
        </script>

        <style type="text/css">
            canvas { border: 1px solid black; }
        </style>
    </head>

    <body onload="setupCanvas(); init();">
        <canvas id="myCanvas" width="1200" height="800"></canvas>
    </body>
</html>

http://jsfiddle.net/WZynM/

Answer 1

你刚刚向后坐标。

context.putImageData(imageData, xLoc, yLoc, 0, 0, imgWidth, imgHeight);

<强> Live Demo

xLoc和yLoc是你放置它的地方，0,0,imgWidth,imgHeight是你放在画布上的数据。

Another example 显示此信息。

许多在线文档看起来有点矛盾但是对于七个参数版本

putImageData(img, dx, dy, dirtyX, dirtyY, dirtyRectWidth, dirtyRectheight)

dx和dy是你的目的地，接下来的四个参数是脏的rect参数，基本上控制从源画布绘制。我能找到的最全面的描述之一是Simon Sarris的HTML5 Unleashed（第165页）。

Answer 2

最近使用过这个，我发现上面的Loktar遇到了一个非常重要的问题。基本上，这种方法在线的一些文档是不正确的，W3Schools是一个特别危险的例子，很多人会转向参考。

他们的文件说明如下：

<强>梗概：

context.putImageData（imgData，X，Y，dirtyX，dirtyY，dirtyWidth，dirtyHeight）;

<强>参数：

imgData：指定要放回画布的ImageData对象
x：ImageData对象左上角的x坐标（以像素为单位）[错误]
y：ImageData对象左上角的y坐标（以像素为单位）[错误]
dirtyX：可选。水平（x）值，以像素为单位，将图像放置在画布上[错误]
dirtyY：可选。垂直（y）值，以像素为单位，将图像放在画布上的位置[错误]
dirtyWidth：可选。用于在画布上绘制图像的宽度
dirtyHeight：可选。用于在画布上绘制图像的高度

正如Loktar所述，CORRECT概要如下：

正确摘要：

context.putImageData（imgData，canvasX，canvasY，srcX，srcY，srcWidth，srcHeight）;

<强>参数：

imgData：指定要放回画布的ImageData对象（如前所述）;
canvasX：您正在绘制imageData的CANVAS上的位置的x坐标;
canvasY：您正在绘制ImageData的CANVAS上的位置的y坐标;
srcX：可选。 ImageData左上角的x坐标;
srcY：可选。 ImageData左上角的y坐标;
srcWidth：可选。 ImageData的宽度;
srcHeight：可选。 ImageData的高度。

使用上面的正确的概要，您不会遇到上面遇到的问题。

我最初会向Loktar提供一个大帽子提示，但是我认为提供一个扩展的答案以防其他人遇到同样的问题。

为什么在指定目标位置时Canvas的putImageData不起作用？

2 个答案: