canvas---像素,根据定位点获取设置像素 getXY setXY_canvas点击时获取其画布的分辨率对应的xy值-CSDN博客

根据坐标点获取像素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
        background: #000000;
        color: #ffffff;
      }
      canvas {
        background: #ffffff;
        transition: translate 0.5s;
      }
    </style>
  </head>
  <body>
   
    <canvas id="canvas" width="400" height="400"></canvas>
  </body>
  <script>
    var oc = document.getElementById("canvas");
    var cvsCtx = oc.getContext("2d");
    cvsCtx.fillStyle="red"
   	cvsCtx.fillRect(0,0,100,100)
   	var oImag =cvsCtx.getImageData(0,0,100,100)
   	console.log( getXY(oImag,3,5))
   	function getXY(imageData,x,y){
   		var w = imageData.width
   		var h = imageData.height
   		var d = imageData.data
   		
   		var color = []
   		color[0]= d[(y*w +x)*4]
   		color[1] =d[(y*w +x)*4+1]
   		color[2]=d[(y*w +x)*4+2]
   		color[3]=d[(y*w +x)*4+3]
   		return color
   	}
     
  </script>
</html>

根据位置设置像素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
        background: #000000;
        color: #ffffff;
      }
      canvas {
        background: #ffffff;
        transition: translate 0.5s;
      }
    </style>
  </head>
  <body>
   
    <canvas id="canvas" width="400" height="400"></canvas>
  </body>
  <script>
    var oc = document.getElementById("canvas");
    var cvsCtx = oc.getContext("2d");
    cvsCtx.fillStyle="red"
   	cvsCtx.fillRect(0,0,100,100)
   	var oImag =cvsCtx.getImageData(0,0,100,100)
   let newImageData=setXY(oImag,3,5)
   cvsCtx.putImageData(newImageData,100,100)
  	function setXY(oImag,x,y){
  		let w = oImag.width
  		let h = oImag.height
  		let data = oImag.data
  		data[(y*w+x)*4]=0
  		data[(y*w+x)*4+1]=255
  		data[(y*w+x)*4+2]=255
  		data[(y*w+x)*4+3]=255
  		data[(y*w+x+1)*4]=0
  		data[(y*w+x+1)*4+1]=255
  		data[(y*w+x+1)*4+2]=255
  		data[(y*w+x+1)*4+3]=255
  		
  			data[(y*w+x+2)*4]=0
  		data[(y*w+x+2)*4+1]=255
  		data[(y*w+x+2)*4+2]=255
  		data[(y*w+x+2)*4+3]=255
  			data[(y*w+x+3)*4]=0
  		data[(y*w+x+3)*4+1]=255
  		data[(y*w+x+3)*4+2]=255
  		data[(y*w+x+3)*4+3]=255
  		
  		oImag.data= data
  		return oImag
  	}
     
  </script>
</html>

更改一行的像素

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<style>
			body {
				background: #000000;
				color: #ffffff;
			}
			
			canvas {
				background: #ffffff;
				transition: translate 0.5s;
			}
		</style>
	</head>

	<body>

		<canvas id="canvas" width="400" height="400"></canvas>
	</body>
	<script>
		var oc = document.getElementById("canvas");
		var cvsCtx = oc.getContext("2d");
		cvsCtx.fillStyle = "red"
		cvsCtx.fillRect(0, 0, 100, 100)
		var oImag = cvsCtx.getImageData(0, 0, 100, 100)
		for(var i = 0; i < oImag.width; i++) {
			setXY(oImag, i, 5)
		}

		function setXY(oImag, x, y) {
			let w = oImag.width
			let h = oImag.height
			let data = oImag.data
			data[(y * w + x) * 4] = 0
			data[(y * w + x) * 4 + 1] = 255
			data[(y * w + x) * 4 + 2] = 255
			data[(y * w + x) * 4 + 3] = 255
		}
		cvsCtx.putImageData(oImag, 100, 100)
	</script>

</html>

改变一行的数据

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<style>
			body {
				background: #000000;
				color: #ffffff;
			}
			
			canvas {
				background: #ffffff;
				transition: translate 0.5s;
			}
		</style>
	</head>

	<body>

		<canvas id="canvas" width="400" height="400"></canvas>
	</body>
	<script>
		var oc = document.getElementById("canvas");
		var cvsCtx = oc.getContext("2d");
		cvsCtx.fillStyle = "red"
		cvsCtx.fillRect(0, 0, 100, 100)
		var oImag = cvsCtx.getImageData(0, 0, 100, 100)
		for(var i = 0; i < oImag.height; i++) {
			setXY(oImag, 3, i)
		}

		function setXY(oImag, x, y) {
			let w = oImag.width
			let h = oImag.height
			let data = oImag.data
			data[(y * w + x) * 4] = 0
			data[(y * w + x) * 4 + 1] = 255
			data[(y * w + x) * 4 + 2] = 255
			data[(y * w + x) * 4 + 3] = 255
		}
		cvsCtx.putImageData(oImag, 100, 100)
	</script>

</html>