如何使用Canvas / Javascript一次選擇100像素（10 x 10塊）？

Question

我正在努力完成正在本網站上進行的實驗所展示的內容。 我想可以通過鼠標單擊來選擇塊。 作為一名Javascript新手，我自己不知道從哪里開始。 將HTML canvas元素添加到混合中（因為它越來越流行並且非常擅長操縱像素）將是一個非常不錯的添加。 另外，如果某些塊已經被給定了坐標，則我無法選擇（也許然后變灰了），我也想這樣做。

我希望我已經說清楚了。 外面有人可以幫助我嗎？ 有人能指出我正確的方向嗎？

太感謝了！ 杜德-達斯蒂奇

Answer 1

你用

id=context.getImageData(x, y, w, h);
//id.data is an array of the format [r, g, b, a, r, g, b, a]

然后，您使用context.putImageData（id，x，y）;
我已經在使用畫布的粒子效果（其中粒子為1x1像素大），我的簡單3d渲染，顏色選擇器等地方應用了此功能。

它有幫助。

---更新：沒意識到您正在詢問遍歷DOM樹...--------下面的代碼將找到已單擊的DOM元素。 請注意，對於作為document.body的直接子代的textnode，必須在它們周圍包裹一個或某種容器。 這是因為它們不具有與element_nodes完全相同的屬性。為了達到類似於網格的效果，將很容易進行擴展。 一旦獲得了命中對象的x / y，就可以進行繪制。 順便說一句，對於您的情況，一次設置一個像素可能不是您可以做的最好的事情。 我建議您研究context.fillStyle="#RRGGBB"; context.fillRect(x, y, w, h); context.fillStyle="#RRGGBB"; context.fillRect(x, y, w, h); 在您的示例中為context.fillStyle="#0000FF"; context.fillRect(x, y, 100, 100); context.fillStyle="#0000FF"; context.fillRect(x, y, 100, 100); ...

<html>
<head>
<script>
function Rect(x, y, w, h)
{
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;

    this.hitTest = function(x, y)
    {
        if(this.x > x) return false; //If LEFT BORDER is right of x, fail
        if(this.x + this.w < x) return false; //IF RIGHT BORDER is LEFT of x, fail
        if(this.y > y) return false; //IF MY TOP IS BELOW y, fail
        if(this.y + this.h < y) return false;//if my BOTTOM is above y, fail
        return true;
    }
};
//original: http://www.quirksmode.org/js/findpos.html 
//Func was changed a little
function findPos(obj) {
    var curleft = curtop = 0;
    try
    {
        if (obj.offsetParent) {
            do {
                curleft += obj.offsetLeft;
                curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
        }
    }catch(e){}; //Sometimes offset parent isn't Assumedined... so we just stop and return
    return [curleft,curtop];
}

function findScreenPos(obj) {
    var curleft = curtop = 0;
    try
    {
        if (obj.offsetParent) {
            do {
                curleft += obj.offsetLeft;
                curtop += obj.offsetTop - obj.scrollTop;
            } while (obj = obj.offsetParent);
        }
    }catch(e){}; //Sometimes offset parent isn't Assumedined... so we just stop and return
    return [curleft,curtop];
}
findElementUnderMouseInNode      = function(node)
{
   //Note that this function excludes our canvas.
   var cnl = node.childNodes.length;
   for(var i = 0; i < cnl; i++)
   {
      var childNode = node.childNodes[i];
      if((childNode.toString() != "[object Comment]") && (childNode != "[object Text]"))
      {
         {
            var childNodePos = findScreenPos(childNode);
            var pos = new Rect(childNodePos[0], childNodePos[1], childNode.offsetWidth, childNode.offsetHeight);
            if(pos.hitTest(_xmouse, _ymouse))
            {
               var deeperNode = findElementUnderMouseInNode(childNode);
               if(deeperNode == null)
                  return childNode;
               else
                  return deeperNode;

            }
         }
      }
   }
   return null;
};
window.onmousedown = function(e){
  if(e.pageX)
  {
    _xmouse = e.pageX;
    _ymouse = e.pageY;
  }
  else
  {
    if(typeof(event) == "undefined") return;
    _xmouse = event.clientX + document.body.scrollLeft;
    _ymouse = event.clientY + document.body.scrollTop;
  }
  var n = findElementUnderMouseInNode(document.body);
  var mydiv = document.createElement("div");
  mydiv.style.position = "absolute";
  mydiv.style.left = findPos(n)[0] + "px";
  mydiv.style.top  = findPos(n)[1] + "px";
  mydiv.style.width= n.offsetWidth + "px";
  mydiv.style.height= n.offsetHeight + "px";
  mydiv.style.border = "1px #FFFF00 solid";
  mydiv.style.backgroundColor = "#FFFF00";
  mydiv.style.opacity = 0.5;
  document.body.appendChild(mydiv);
}
</script>
</head>
<body>
<span>asdf</span><br>
<img src="" width="100" height="100" />
<div>LOL</div>
asdf
</body>
</html>

功能邏輯：
該函數獲取元素的子節點。
如果（該節點不是評論節點或文本節點）並且該子代不是您的畫布
搜索節點的子節點[更精確地說，選擇位於DOM樹邊緣的元素，否則您可能會說“用戶單擊了document.body”]

如果childNode的子節點被擊中，則返回該子節點，否則返回自己。

Answer 2

這是一篇有趣的文章，其中包含許多示例，可以幫助您開始進行逐像素操作。 基本上，您需要制作一個數組並在所需的級別對其進行修改。

http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/

如何使用Canvas / Javascript一次選擇100像素（10 x 10塊）？

問題描述

2 個解決方案

解決方案1
1 已采納 2010-04-12 20:47:25

解決方案2
0 2010-04-12 20:24:42

如何使用Canvas / Javascript一次選擇100像素（10 x 10塊）？

問題描述

2 個解決方案

解決方案1 1 已采納 2010-04-12 20:47:25

解決方案2 0 2010-04-12 20:24:42

解決方案1
1 已采納 2010-04-12 20:47:25

解決方案2
0 2010-04-12 20:24:42