canvas学习笔记4--刮刮卡

最新推荐文章于 2021-10-11 17:27:13 发布

心刻

最新推荐文章于 2021-10-11 17:27:13 发布

阅读量173

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44679078/article/details/108953175

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

globalCompositeOperation
该属性设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上。
源图像 = 你打算放置到画布上的绘图
目标图像 = 你已经放置在画布上的绘图

在这里插入图片描述

<canvas id="canvas" width="800" height="600"></canvas>

<script>
	var canvas = document.querySelector("#canvas")
	var ctx = canvas.getContext("2d")
	//第一个红色矩形为目标图像
	ctx.fillStyle = "hotpink"
	ctx.fillRect(100,100,200,200)
	
	//第二个蓝色矩形为源图像
	ctx.fillStyle = "deepskyblue"
	ctx.fillRect(200,200,200,200)
</script>

在这里插入图片描述
设置globalCompositeOperation的值是atop

设置source-in,如下

设置source-out,如下

设置destination-over,如下

设置destination-atop,如下

设置destination-in,如下

设置destination-out,如下（刮刮卡就是用这个）

设置lighter,如下
在这里插入图片描述
设置copy,如下（copy就是之前的图片都不见了，只保留最新的图像）

设置xor,如下（等同于设置lighter）

刮刮卡功能实现

<style type="text/css">
	#ggk{
		width:400px;
		height:100px;
		position:relative;
	}
	#ggk .jp{
		width:400px;
		height:100px;
		position:absolute;
		left:0;
		top:0;
		text-align:center;
		color:deeppink;
		font-size:50px;
		line-height:100px;
	}
	#canvas{
		width:400px;
		height:100px;
		position:absolute;
		left:0;
		top:0;
	}
</style>

<body>
	<div id="ggk">
		<div class="jp">谢谢惠顾</div>
		<canvas id="canvas" width="400" height="100"></canvas>
</body>

<script>
	var canvas = document,querySelector("#canvas")
	var ggkDom = document,querySelector("#ggk")
	var ctx = canvas.getContext('2d')
	ctx.fillStyle = 'darkgray'
	ctx.fillRect(0,0,400,100)
	ctx.font = "20px 微软雅黑"
	ctx.fillStyle = 'fff'
	ctx.fillText("刮刮卡".180,50)
	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
	}
</script>

心刻

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas学习笔记4--刮刮卡

globalCompositeOperation该属性设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上。源图像 = 你打算放置到画布上的绘图目标图像 = 你已经放置在画布上的绘图<canvas id="canvas" width="800" height="600"></canvas><script> var canvas = document.querySelector("#canvas") var ctx = canvas.getCo
复制链接

扫一扫