一个像素填充,用画布
One pixel fill, with canvas
这可能是一个有点愚蠢的问题,但是…是否有可能根据用户单击的位置逐个像素地填充HTML画布元素?
我想有一个空白的画布,用户将每次单击一个像素,这将填充颜色,并将该用户/像素输入数据库。
如何做到这一点?我怎么知道哪个像素,哪个用户点击了?
谢谢
是的,你可以根据鼠标点击单独设置每个画布像素。
下面是如何使用上下文设置单个像素。gettimagedata和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);
}
相关文章:
- 如何通过溢出来判断元素被切断了多少像素:隐藏在父级上
- 点击facebook像素跟踪注册(JS/JQUERY代码)
- 点击(右键点击)使用传单地图库获取图像覆盖的像素坐标
- 如何使线条的边缘像素保持半透明
- 画布:逐像素绘制图像并请求动画帧计时
- 如何's css标记"-webkit最小设备像素比”;在Javascript中实现
- javascript mootools平滑滚动'x'像素数量
- 逐像素碰撞检测弹球
- 获取图像的平均外部像素颜色
- 如何根据分辨率添加像素
- 仅当窗口宽度>940像素,无论是通过页面加载还是调整大小
- 使用画布在秒内逐像素显示图片
- JS/CSS:如何在向下滚动超过1200像素(高度)后更改z索引值
- 获取以屏幕像素为单位的旋转SVG元素的边界
- 如何将像素添加到元素的当前位置
- GridStack项的高度和宽度(以像素为单位)
- 如何逐像素填充画布
- 一个像素填充,用画布
- 我怎么能得到宽度,填充,边框和边距的总和在像素
- 将填充从像素转换为百分比