Html5 反色及其透明效果

最新推荐文章于 2022-01-19 10:46:10 发布

ch_kexin

最新推荐文章于 2022-01-19 10:46:10 发布

阅读量1.4k

点赞数 1

分类专栏： HTML5 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/ch_kexin/article/details/84115734

版权

HTML5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏


<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>PaoPaoGame</title>
		<!-- 	<script type="text/javascript" src="src/Main.js"></script> -->
		<script type="text/javascript">
			var context = null;
			var image = null;
			function loadImage() {
				var main = document.getElementById("maincanvas");
				if(main == null)
					return false;
				context = main.getContext("2d");
				drawImage();
			}

			function drawImage() {
				//反色效果
				var imgSrc = document.getElementById("image");
				context.drawImage(imgSrc, 0, 0);
				var imgd = context.getImageData(0, 0, 398, 552);
				var pix = imgd.data;
				for(var i = 0, n = pix.length; i < n; i += 4) {
					pix[i] = 255 - pix[i];
					pix[i + 1] = 255 - pix[i + 1];
					pix[i + 2] = 255 - pix[i + 2];
				}
				context.putImageData(imgd, 0, 0, 398, 552);

				//透明度效果
				var imgSrc_alpha = document.getElementById("image_alpha");
				context.drawImage(imgSrc_alpha, 400, 0, 398, 552);
				var imgd_alpha = context.getImageData(400, 0, 398, 552);

				var pix_alpha = imgd_alpha.data;
				for(var j = 3, n = pix_alpha.length; j < n; j += 4) {
					pix_alpha[j] = pix_alpha[j] * 0.2;
				}
				context.putImageData(imgd_alpha, 400, 0, 398);
			}
		</script>
	</head>
	<body onLoad="loadImage()">
	    <canvas id="maincanvas" width ="800" height ="600" >
	    <img src="images/other/1.png" width="398" height="552" id="image" />
	    <img src="images/other/2.png" width="398" height="552" id="image_alpha"/>			
Sorry, your browser doesn't support canvas, please use Firefox3.6+, Safari5+, Chrome, IE9 etc.
		</canvas>
	</body>
</html>

也可以外部调用JS
// JavaScript Document
Main.js


var main ;
var context = null;
function loadImage() {
	main = document.getElementById("maincanvas");
	if(main == null)
		return false;
	context = main.getContext("2d");
	drawImage();
}
function drawImage() {
	var image = new Image();
	image.src = "images/other/kboom.png";
	image.onload = function() {
	context.drawImage(image, 0, 0);
	var imgd_alpha = context.getImageData(0, 0, 398, 552);
	var pix_alpha = imgd_alpha.data;
	for(var j = 3, n = pix_alpha.length; j < n; j += 4) {
		pix_alpha[j] = pix_alpha[j] * 0.2;
	}
	context.putImageData(imgd_alpha, 0, 0);
	};
}

ch_kexin

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html5 反色及其透明效果

[code="java"] PaoPaoGame var context = null; var image = null; function loadImage() { var main = document.getElementById("maincanvas"); if(main == null) ...
复制链接

扫一扫