`
ch_kexin
  • 浏览: 875791 次
  • 性别: Icon_minigender_2
  • 来自: 青岛
社区版块
存档分类
最新评论

Html5 反色 及其 透明 效果

 
阅读更多 
<!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);
	};
}

分享到：
| HTML5 Canvas 属性、定义及方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics