如何使用Canvas/Javascript一次选择100像素（10 x 10块）？
我正在努力完成我正在做的一个实验在上演示的内容。我想，这些块是通过鼠标单击来选择的。作为一名Javascript新手，我自己也不知道从哪里开始这样的工作。将HTML画布元素添加到混合中（因为它越来越受欢迎并且非常擅长处理像素）将是一个非常好的添加。另外，如果某些块在给定坐标的情况下已经被选中，而无法被选中（可能随后会变灰），我也希望这样做 我希望我已经说清楚了。外面有人能帮我吗？谁能给我指一下正确的方向吗 万分感谢！如何使用Canvas/Javascript一次选择100像素（10 x 10块）？,javascript,canvas,Javascript,Canvas,我正在努力完成我正在做的一个实验在上演示的内容。我想，这些块是通过鼠标单击来选择的。作为一名Javascript新手，我自己也不知道从哪里开始这样的工作。将HTML画布元素添加到混合中（因为它越来越受欢迎并且非常擅长处理像素）将是一个非常好的添加。另外，如果某些块在给定坐标的情况下已经被选中，而无法被选中（可能随后会变灰），我也希望这样做 我希望我已经说清楚了。外面有人能帮我吗？谁能给我指一下正确的方向吗 万分感谢！ Dude Dastic这是一篇有趣的文章，其中有许多示例，可以帮助您开始每像素
Dude Dastic这是一篇有趣的文章，其中有许多示例，可以帮助您开始每像素操作。您基本上需要创建一个数组，并在您想要的级别对其进行修改 您使用的
id=context.getImageData(x, y, w, h);
//id.data is an array of the format [r, g, b, a, r, g, b, a]
我已经在一些地方应用了这一点，例如使用画布的粒子效果[其中粒子是1x1像素大]、我的简单3d渲染、颜色选择器等 这很有帮助 ---更新：没有意识到你在问关于遍历DOM树的问题。。。 -------下面的代码将查找已单击的DOM元素。请注意，对于document.body的直接子节点textnodes，必须在其周围包装一个或某种容器。这是因为它们与元素节点没有完全相同的属性。。。对于类似网格的效果，很容易扩展它。一旦得到命中对象的x/y，就可以进行绘图。顺便说一下，对于您的情况，一次设置一个像素可能不是最好的选择。我建议您查看
context.fillStyle=“#RRGGBB”；fillRect（x，y，w，h）在您的示例中是context.fillStyle=“#0000FF”；fillRect（x，y，100100）
<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>
函数Rect（x，y，w，h）
{
这个.x=x；
这个。y=y；
这个.w=w；
这个，h=h；
this.hitTest=函数（x，y）
{
if（this.x>x）返回false；//如果左边框在x的右边，则返回fail
如果（this.x+this.wy）返回false；//如果我的顶部低于y，则失败
如果（this.y+this.h
英雄联盟
asdf
函数的逻辑：
函数获取元素的子节点。
如果（节点不是注释节点或文本节点）且子节点不是您的画布
搜索节点的子节点[更准确地说，选择DOM树边缘的元素，否则您可能会说“用户单击了document.body”]
如果childNode有一个被命中的childNode，则返回该节点，否则返回您自己 谢谢你的链接，agscala。这是一件非常可怕的事情。也许我应该考虑用其他方式来完成这件事。Javascript和canvas元素都有陡峭的学习曲线。不管怎样，谢谢你的帮助，伊兹瓦蒂。我实际上没有意识到你在试图找出要选择的节点。我知道怎么做。我会更新我的答案，我现在就把代码拿出来。您正在寻找的是一种遍历dom的方法，我在我的第一个CMS中使用了这种方法……我通过访问了解了如何在画布上实际绘制网格。我还可以通过css显示使用背景图像