Javascript 存储图形的画布坐标

我只是有点胡闹，所以我做了这个安卓解锁风格的东西。它使用

让人画画，然后相应地在点上着色。但是，我现在要做的是将图形的坐标存储在表中。因此，下次可以对照存储的图形检查图形

代码笔：

代码：

变量画布，ctx，标志=false，
prevX=0，
currX=0，
prevY=0，
咖喱=0，
dot_标志=假；
var x=“#000”，
y=1；
函数init（）{
canvas=document.getElementById（'can'）；
ctx=canvas.getContext（“2d”）；
w=画布宽度；
h=画布高度；
canvas.addEventListener（“mousemove”，函数（e）{
findxy（'move'，e）
}，假）；
canvas.addEventListener（“鼠标向下”，函数（e）{
findxy（'down'，e）
}，假）；
canvas.addEventListener（“mouseup”，函数（e）{
findxy（'up'，e）
}，假）；
canvas.addEventListener（“mouseout”，函数（e）{
findxy（'out'，e）
}，假）；
}
函数buttonCoords（id）{//替换coorX函数，将元素id作为参数
var元素=document.getElementById（id）；
var position=element.getBoundingClientRect（）；
var x=位置。左侧+7；
变量y=位置。顶部+7；
xend=x+19；
yend=y+19；
返回{
上图：y，
底部：yend，
左:x,，
右：森德
};    
}
函数绘图（）{
ctx.beginPath（）；
ctx.moveTo（prevX，prevY）；
ctx.lineTo（咖喱，咖喱）；
ctx.strokeStyle=x；
ctx.lineWidth=y；
ctx.stroke（）；
var i=0；
var k=0；
var coords=buttonCoords（'patternlockbutton1'）；
var coords2=buttonCoords（'patternlockbutton2'）；
var coords3=buttonCoords（'patternlockbutton3'）；
var coords4=按钮词（'patternlockbutton4'）；
var coords5=按钮词（'patternlockbutton5'）；
var coords6=按钮词（“patternlockbutton6”）；
var coords7=按钮词（“patternlockbutton7”）；
var coords8=按钮词（'patternlockbutton8'）；
var coords9=buttonCoords（'patternlockbutton9'）；
如果（currX>=coords.left&&currX=coords.top&&currY=coords2.left&&currX=coords2.top&&currY=coords3.left&&currY=coords3.top&&currY=coords4.left&&currX=coords4.top&&currY=coords5.left&&currX=coords5.top&&currY=coords6.left&&currY=coords7.left&&currY=coords7.top&&currY=coords7.left）&&currX=coords8.top&&currY=coords9.left&&currX=coords9.top&&currY要获取当前在HTML5画布上的数据，我们只需使用
ctx.getImageData（…）
。这会获取您定义的某个矩形内每个像素的信息，我们对像素本身感兴趣。这些信息存储在
imageData.data
中，如下所示：

imageData.data[0] -> pixel1 red value
imageData.data[1] -> pixel1 green value
imageData.data[2] -> pixel1 blue value
imageData.data[3] -> pixel1 alpha value
imageData.data[4] -> pixel2 red value
...

因此，像素以4个为一组存储。如果您想要整个画布，我们会：

ctx.getImageData(0, 0, canvas.width, canvas.height)

为了检查两个图像之间的差异，我们获取了这两个图像的图像数据，然后我们循环像素值并检查差异。下面是获取两个不同图像的示例。在这个示例中，我使用第三个图像以红色绘制差异：

var X = 0, Y = 0;

for(var i = 0; i < img1Data.data.length; i += 4) {  
    if(img1Data.data[i] != img2Data.data[i] || 
    img1Data.data[i+1] != img2Data.data[i+1] || 
    img1Data.data[i+2] != img2Data.data[i+2] || 
    img1Data.data[i+3] != img2Data.data[i+3]) {
        ctx_diff.fillRect( X, Y, 1, 1 );
    }
    X += 1;
    if(X >= canvas1.width) { Y+=1; X = 0 }
}

var X=0，Y=0；
对于（var i=0；i=canvas1.width）{Y+=1；X=0}
}

整个代码都在这里

以下是输出：

JSFIDLE网站似乎有问题，看起来有些未使用帐户制作的小提琴被删除了。为了安全起见，我在这里通过帐户重新制作了小提琴：好的，谢谢！我将此添加到代码中，但不知怎的，它无法识别某些部分。我将其粘贴在这里：它似乎可以识别块和线当我单击Console.log（）

时，它被画出来了。你的意思是红色的圆圈没有显示吗？如果是，那只是因为它们不在画布上。

var X = 0, Y = 0;

for(var i = 0; i < img1Data.data.length; i += 4) {  
    if(img1Data.data[i] != img2Data.data[i] || 
    img1Data.data[i+1] != img2Data.data[i+1] || 
    img1Data.data[i+2] != img2Data.data[i+2] || 
    img1Data.data[i+3] != img2Data.data[i+3]) {
        ctx_diff.fillRect( X, Y, 1, 1 );
    }
    X += 1;
    if(X >= canvas1.width) { Y+=1; X = 0 }
}