javascript学习-canvas图的叠加

最新推荐文章于 2024-08-10 18:44:14 发布

加油吧qaq

最新推荐文章于 2024-08-10 18:44:14 发布

阅读量5.4k

点赞数 3

文章标签： javascript canvas

本文链接：https://blog.csdn.net/qq_43368682/article/details/107777554

版权

canvas图的叠加

在这里插入图片描述

【重要】源图像 = 您打算放置到画布上的绘图。
目标图像 = 您已经放置在画布上的绘图。

图像操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="800" height="600"></canvas>
		<script type="text/javascript">
			var canvas = document.querySelector("#canvas")
			var ctx = canvas.getContext('2d')
			//第一个红色矩形为目标图像
			ctx.fillStyle = "hotpink"
			ctx.fillRect(100,100,200,200)
			
			ctx.globalCompositeOperation="xor"
			console.log(ctx)
			/*默认值为source-over，源图像叠加在目标图像上
			 source-atop，在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
			 source-in,在目标图像中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的。
			 source-out,在目标图像之外显示源图像。只有目标图像之外的->源图像->部分会显示，目标图像是透明的
			 destination-over,在源图像上显示目标图像。
			 destination-atop,在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。
			 destination-in,在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示，源图像是透明的。
			 destination-out,在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的。
			 lighter,显示源图像 + 目标图像
			 copy,显示源图像。忽略目标图像。
			 xor等同于lighter,使用异或操作对源图像与目标图像进行组合。
			 */	
			
			//第二个蓝色矩形为源图像
			ctx.fillStyle = "deepskyblue"
			ctx.fillRect(200,200,200,200)
		</script>
	</body>
</html>

结果：
在这里插入图片描述

刮刮卡-图像重叠应用

结合鼠标点击事件完成。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#ggk{
				width: 600px;
				height: 200px;
				position: relative;
			}
			#ggk .jp{
				width: 600px;
				height: 200px;
				position: absolute;
				left: 0;
				top: 0;
				text-align: center;
				color: deeppink;
				font-size: 50px;
				line-height: 200px;
			}
			#ggk #canvas{
				width: 600px;
				height: 200px;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div id="ggk">
			<div class="jp">谢谢惠顾</div>
			<canvas id="canvas" width="600" height="200"></canvas>
		</div>
		<script type="text/javascript">
			var canvas = document.querySelector("#canvas")
			var ggkDom = document.querySelector("#ggk")
			var jpDom = document.querySelector(".jp")
			var ctx = canvas.getContext('2d');
			ctx.fillStyle= "darkgray"
			ctx.fillRect(0,0,600,200)
			ctx.font = "20px 微软雅黑"
			ctx.fillStyle = '#fff'
			ctx.fillText("刮刮卡",260,100)
			var isDraw = false;
			//设置isDraw = true,即为允许绘制
			canvas.onmousedown = function(){
				isDraw = true
			}
			
			//移动的时候绘制圆形,将源图像内的目标的内容给清除掉
			canvas.onmousemove = function(e){
				if(isDraw){
					var x = e.pageX - ggkDom.offsetLeft;
					var y = e.pageY - ggkDom.offsetTop
					ctx.globalCompositeOperation = "destination-out"
					ctx.arc(x,y,20,0,2*Math.PI)
					ctx.fill()
					
				}
				
			}
			
			canvas.onmouseup = function(){
				isDraw = false
			}
			jpDom.onselectstart = function(){
				return false
			}
			
			var arr = [{content:"一等奖：Mac",p:0.1},{content:"二等奖：Ipad",p:0.2},{content:"三等奖：TF",p:0.3}]
			var randomNum = Math.random()//0-1的随机值
			if(randomNum<arr[0].p){       //小于0.1时
				jpDom.innerHTML = arr[0].content
			}else if(randomNum<arr[1].p+arr[0].p){//小于0.3时大于0.1
				jpDom.innerHTML = arr[1].content
			}else if(randomNum<arr[2].p+arr[1].p+arr[0].p){//小于0.6大于0.3
				jpDom.innerHTML = arr[2].content
			}
		</script>
	</body>
</html>