一個像素填充，與畫布

這可能是一個有點愚蠢的問題，但......是否有可能填充一個HTML畫布元素，逐個像素，取決於用戶點擊的位置？一個像素填充，與畫布

我想要一個空白的畫布，用戶將一次點擊一個像素，這將填充一種顏色，並將該用戶/像素輸入到數據庫中。

這將如何完成？我如何知道用戶點擊了哪個像素？

感謝

2013-04-03 KyleK

是的，你可以設置單獨基於鼠標點擊畫布的每個像素。

這裏是你如何設置使用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); 
}

來源

2013-04-03 17:37:48 markE

哇!!那很快，而且非常簡潔和樂於助人！非常感謝你！！ – KyleK

還有2個問題可以標記....如何阻止某人選擇相同的像素？（我想我可以做一個ajax調用來檢查它是否已經在數據庫中??）另外我怎麼能改變這個，所以它的25x25「像素」，而不是1x1（或任何其他大小的事情），我很抱歉我的天真。 – KyleK

設置像素塊很容易（請參閱上面編輯的答案）。關於不是「雙重設置」：新塊和已設置塊可能不完全重疊。在那種情況下，你會允許選擇嗎？順便說一句，爲了檢查一個塊是否已經設置，我不會一路回到數據庫，我只是看畫布，看看塊是否已經設置（更快/更高效）;） – markE

一個像素填充，與畫布

回答

相關問題