一个像素填充，带画布答案

【问题标题】：One pixel fill, with canvas一个像素填充，带画布
【发布时间】：2013-03-25 11:31:14
【问题描述】：

这可能是一个有点愚蠢的问题，但是...是否可以根据用户点击的位置逐个像素地填充 HTML 画布元素？

我想要一个空白画布，用户将一次单击一个像素，这将填充一种颜色，然后将该用户/像素输入数据库。

如何做到这一点？我怎么知道什么像素，什么用户点击了？

谢谢

【问题讨论】：

标签： javascript html canvas mapping pixel

【解决方案1】：

是的，您可以根据鼠标点击单独设置每个画布像素。

以下是使用 context.getImageData 和 context.putImageData 设置单个像素的方法：

    function setPixel(x, y, red, green, blue) {
        pixPos=( (~~x) + (~~y)) * 4;
        var pxData = ctx.getImageData(x,y,1,1);
            pxData.data[0]=red;
            pxData.data[1]=green;
            pxData.data[2]=blue;
            pxData.data[3]=255;
            ctx.putImageData(pxData,x,y);
    }

您可以通过添加这样的事件侦听器来获得鼠标点击的 X/Y 位置：

    // get the position of the canvas relative to the web page
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    // tell the browser to send you mouse down events
    // Here I use jquery -- be sure to add jquery or just do addEventListener instead
    $("#canvas").mousedown(function(e){handleMouseDown(e);});

    // handle the mousedown events that the browser sends you
    function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousedown stuff here
      setPixel(mouseX,mouseY,red,green,blue);
    }

这是代码和小提琴：http://jsfiddle.net/m1erickson/wtStf/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var red=255;
    var green=0;
    var blue=0;

    function setPixel(x, y, red, green, blue) {
        pixPos=( (~~x) + (~~y)) * 4;
        var pxData = ctx.getImageData(x,y,1,1);
            pxData.data[0]=red;
            pxData.data[1]=green;
            pxData.data[2]=blue;
            pxData.data[3]=255;
            ctx.putImageData(pxData,x,y);
    }


    function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousedown stuff here
      setPixel(mouseX,mouseY,red,green,blue);
    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

[编辑附加问题]

您可以轻松修改代码以设置像素块，如下所示：

var blockWidth=25;
var blockHeight=25;

function setPixel(x, y, red, green, blue) {
    pixPos=( (~~x) + (~~y)) * 4;
    var pxData = ctx.getImageData(x,y,blockWidth,blockHeight);
    for(var n=0;n<blockWidth*blockHeight;n++){
        pxData.data[n*4+0]=red;
        pxData.data[n*4+1]=green;
        pxData.data[n*4+2]=blue;
        pxData.data[n*4+3]=255;
    }
        ctx.putImageData(pxData,x,y);
}

【讨论】：

哇！！这很快，非常简洁和有用！非常感谢！！
还有 2 个问题要问你 mark....如何阻止某人选择相同的像素？（我想我可以做一个 ajax 调用来检查它是否已经在数据库中？？）另外我怎样才能改变它，以便它是一个 25x25“像素”而不是 1x1（或任何其他大小）我为我的天真。
设置像素块很容易（请参阅上面我编辑的答案）。关于不“双重设置”：新块和已设置块可能不完全重叠。在那种情况下，你会允许选择吗？顺便说一句，要检查是否已经设置了块，我不会一直回到数据库，我只会在画布上查看块是否已经设置（更快/更有效）;)
但是如果有多个用户同时放置像素怎么办......我不需要跟踪它们，并通过不断刷新最新数据库来保持画布最新价值观？我将如何在每次更新时绘制画布？那将如何工作。只是一个循环，循环遍历这些值，然后一个接一个地重新放置它们？
Websockets 是 html5 的新标准化部分，因此您的限制不会出现在 php（插件可用）上，而是出现在当前实现 websockets 的浏览器上。（IEnet.tutsplus.com/tutorials/javascript-ajax/…