一像素填充，带画布

Question

This might be a somewhat stupid question, but...is it possible to fill an HTML canvas element, pixel by pixel, depending on where a user clicks? 这可能是一个有点愚蠢的问题，但是...是否可以根据用户单击的位置逐像素填充HTML画布元素？

I want to have a blank canvas, that users will click one pixel at a time, which will fill a color, and enter that user/pixel into a database. 我想要一个空白的画布，用户一次单击一个像素，它将填充一种颜色，然后将该用户/像素输入数据库。

How would this be done? 怎么做？ How can I know what pixel, what user clicked? 我怎么知道什么像素，什么用户点击？

Thanks 谢谢

Answer 1

Yes, you can set each canvas pixel individually based on mouse-clicks. 是的，您可以基于鼠标单击分别设置每个画布像素。

Here's how you set an individual pixel using context.getImageData and context.putImageData: 这是使用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);
    }

And you get the X/Y position of the mouse click by adding an event listener like this: 通过添加如下所示的事件侦听器，您可以获得鼠标单击的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);
    }

Here's code and a fiddle: http://jsfiddle.net/m1erickson/wtStf/ 这是代码和小提琴： 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>

[Edited for additional question] [针对其他问题进行编辑]

You can easily modify the code to set blocks of pixels like this: 您可以轻松地修改代码以设置像素块，如下所示：

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);
}

一像素填充，带画布

问题描述

1 个解决方案

解决方案1
2 已采纳 2013-04-03 17:37:48

一像素填充，带画布

问题描述

1 个解决方案

解决方案1 2 已采纳 2013-04-03 17:37:48

解决方案1
2 已采纳 2013-04-03 17:37:48