canvas像素---反射---渐变--马赛克

反转像素

<!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="600" height="400"></canvas>
	</body>
	<script>
		var oc = document.getElementById("canvas");
		var cvsCtx = oc.getContext("2d");
var yImag = new Image()
yImag.onload = function() {
	draw(this)
}

function draw(obj) {
	cvsCtx.width = obj.width
	cvsCtx.drawImage(yImag, 0, 0)
	let oImg = cvsCtx.getImageData(0, 0, obj.width, obj.height)
	var w = oImg.width
	var h = oImg.height
		var newImg = cvsCtx.createImageData(obj.width,obj.height);//创造一个新的像素对象
	for(var i = 0; i < h; i++) {
		for(var j = 0; j < w; j++) {
			var result = []
			var color = getXY(oImg, j, i)
			result[0] = 255 - color[0]
			result[1] = 255 - color[1]
			result[2] = 255 - color[2]
			result[3] = 255

			setXY(newImg, j, h-i, result)
		}
	}
	cvsCtx.putImageData(newImg,0,obj.height)

}
yImag.src ="abc.png"

		function getXY(obj, x, y) {
			let w = obj.width
			let h = obj.height
			let data = obj.data
			let arr = []
			arr[0] = data[(y * w + x) * 4]
			arr[1] = data[(y * w + x) * 4 + 1]
			arr[2] = data[(y * w + x) * 4 + 2]
			arr[3] = data[(y * w + x) * 4 + 3]
			return arr
		}

		function setXY(obj, x, y, color) {
			let w = obj.width
			let h = obj.height
			let data = obj.data
			data[(y * w + x) * 4] = color[0]
			data[(y * w + x) * 4 + 1] = color[1]
			data[(y * w + x) * 4 + 2] = color[2]
			data[(y * w + x) * 4 + 3] = color[3]
		}
	</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="600" height="400"></canvas>
	</body>
	<script>
		var oc = document.getElementById("canvas");
		var cvsCtx = oc.getContext("2d");
var yImag = new Image()
yImag.onload = function() {
	draw(this)
}

function draw(obj) {
	cvsCtx.width = obj.width
	cvsCtx.drawImage(yImag, 0, 0)
	let oImg = cvsCtx.getImageData(0, 0, obj.width, obj.height)
	var w = oImg.width
	var h = oImg.height
		var newImg = cvsCtx.createImageData(obj.width,obj.height);//创造一个新的像素对象
	for(var i = 0; i < h; i++) {
		for(var j = 0; j < w; j++) {
			var result = []
			var color = getXY(oImg, j, i)
			result[0] = 255 - color[0]
			result[1] = 255 - color[1]
			result[2] = 255 - color[2]
			result[3] = Math.floor(255*i/h)  //逐行改变透明度形成渐变

			setXY(newImg, j, h-i, result)
		}
	}
	cvsCtx.putImageData(newImg,0,obj.height)

}
yImag.src ="abc.png"

		function getXY(obj, x, y) {
			let w = obj.width
			let h = obj.height
			let data = obj.data
			let arr = []
			arr[0] = data[(y * w + x) * 4]
			arr[1] = data[(y * w + x) * 4 + 1]
			arr[2] = data[(y * w + x) * 4 + 2]
			arr[3] = data[(y * w + x) * 4 + 3]
			return arr
		}

		function setXY(obj, x, y, color) {
			let w = obj.width
			let h = obj.height
			let data = obj.data
			data[(y * w + x) * 4] = color[0]
			data[(y * w + x) * 4 + 1] = color[1]
			data[(y * w + x) * 4 + 2] = color[2]
			data[(y * w + x) * 4 + 3] = color[3]
		}
	</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="600" height="400"></canvas>
	</body>
	<script>
		var oc = document.getElementById("canvas");
		var cvsCtx = oc.getContext("2d");
		var yImag = new Image()
		yImag.onload = function() {
			draw(this)
		}

		function draw(obj) {
			oc.width = obj.width
			oc.height = obj.height * 2
			cvsCtx.drawImage(yImag, 0, 0)
			let oImg = cvsCtx.getImageData(0, 0, obj.width, obj.height)
			var w = oImg.width
			var h = oImg.height
			var newImg = cvsCtx.createImageData(obj.width, obj.height); //创造一个新的像素对象

			var stepW = w / 10
			var stepH = h / 10
			for(var i = 0; i < stepH; i++) {
				for(var j = 0; j < stepW; j++) {
					var color = getXY(oImg,
						(j * 10 + Math.floor(Math.random() * 10)),
						(i * 10 + Math.floor(Math.random() * 10)))
					for(var k = 0; k < 10; k++) {
						for(var l = 0; l < 10; l++) {
							setXY(newImg, j * 10 + l, i * 10 + k,color)
						}
					}
				}
			}
			cvsCtx.putImageData(newImg,0,h)

		}
		yImag.src = "abc.png"

		function getXY(obj, x, y) {
			let w = obj.width
			let h = obj.height
			let data = obj.data
			let arr = []
			arr[0] = data[(y * w + x) * 4]
			arr[1] = data[(y * w + x) * 4 + 1]
			arr[2] = data[(y * w + x) * 4 + 2]
			arr[3] = data[(y * w + x) * 4 + 3]
			return arr
		}

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

</html>

canvas像素---反射---渐变--马赛克

猜你喜欢