canvas实例--单像素操作 





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body,html{
            height:100%;
            overflow: hidden;
            background: #616161;
        }
        #test{
            position: absolute;
            left:50%;
            top:50%;
            transform: translate3d(-50%,-50%,0);
            background: white;
            margin:auto;
        }
    </style>
</head>
<body>
<canvas id="test" height="400" width="400">
    <span>您的浏览器不支持canvas操作！！</span>
</canvas>
</body>
</html>
<script>
    var canvas=document.querySelector("#test");
    if(canvas.getContext){
        var ctx=canvas.getContext('2d');
        ctx.save();
        ctx.fillStyle='green';
        ctx.beginPath();
        ctx.fillRect(50,50,100,100);
        ctx.restore();

        var myData=ctx.getImageData(0,0,canvas.width,canvas.height);
        //(49,49)为黑色透明；(50,50)为绿色
        var color=getPxInfo(myData,49,49);
        console.log(color);
        for(var i=0;i<myData.width;i++){
            setPxInfo(myData,49,i,[0,0,0,255]);
        }
        // 设置后将颜色放入图像中
        ctx.putImageData(myData,0,0)
    }
    function getPxInfo(myData,x,y) {
        var color=[];
        var data=myData.data;
        var w=myData.width;
        var h=myData.height;
//(x,y) 前面都有x*w+y个像素点
        //r
        color[0]=data[(y*w+x)*4];
        //g
        color[1]=data[(y*w+x)*4+1];
        //b
        color[2]=data[(y*w+x)*4+2];
        //a
        color[3]=data[(y*w+x)*4+3];
        return color;
    }
    function setPxInfo(myData,x,y,color) {
        var data=myData.data;
        var w=myData.width;
        var h=myData.height;
//(x,y) 前面都有y*w+x个像素点，x多少行，y多少列
        //r
        data[(y*w+x)*4]= color[0];
        //g
        data[(y*w+x)*4+1]=color[1];
        //b
        data[(y*w+x)*4+2]= color[2];
        //a
        data[(y*w+x)*4+3]=color[3];
    }
</script>












		

		
posted @ 
2020-08-19 14:45 
花未眠0619 
阅读(157) 
评论(0) 
 
收藏 
举报