canvas自制刮刮卡~
效果图
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvs刮刮乐</title>
<style>
html,
body,
.container{
height: 100%;
width: 100%;
}
.container{
position: relative;
}
#demo4{
position: absolute;
top:50%;
left: 50%;
border: 1px solid rgb(19, 18, 18);
}
#content{
position: absolute;
top: 53.5%;
left: 53.5%;
z-index: -1;
padding:10px;
font-size: 15px;
background-color: rgb(175, 241, 88);
}
</style>
</head>
<body>
<div class="container">
<canvas id="demo4" width="200px" height="100px"></canvas>
<div id="content">获得女朋友一枚</div>
</div>
<script type="text/javascript">
//获取元素dom
let demo4=document.querySelector('#demo4')
//指定画布是2d形式
let ctx= demo4.getContext('2d')
//改变画布的原点
// ctx.translate(100,100)
// 保存当前状态
// ctx.save()
// -----------------------------------------------------刮刮乐的框
// 填充颜色
ctx.fillStyle = '#ccc'
// 填充矩形 fillRect(起始X,起始Y,终点X,终点Y)
ctx.fillRect(0,0,200,100)
// ----------------------------------------------------刮刮乐的文字
//填充的颜色
ctx.fillStyle = 'black'
//设置文字大小和样式
ctx.font = "20px serif";
// 绘制填充文字
ctx.fillText('刮刮乐', 70, 50)
// --------------------------------------------------分析实现瓜瓜乐原理
//设置一个变量接收布尔值,当监听发生鼠标按下,改变状态
// 鼠标按下并移动的时候,点击的位置为圆心画圆 用合成操作ctx.globalCompositeOperation = type;destination-out// 现有内容保持在新图形不重叠的地方。
// 当鼠标抬起的时候 状态恢复
// ctx.arc(圆心x,圆心y, 半径, 圆弧的起始点x轴方向开始计算, 圆弧的终点);
let toggle=false
let container=document.querySelector('.container')
container.addEventListener('mousedown',()=>{
toggle=true
})
container.addEventListener('mousemove',(e)=>{
if(toggle){
//获取鼠标在画布中的位置 鼠标在页面的x,y-原点到画布的x,y--作为圆的圆心
const x=e.pageX- demo4.offsetLeft
const y=e.pageY-demo4.offsetTop
//设置合成配置
ctx.globalCompositeOperation ='destination-out'
ctx.arc(x,y,10,0,2*Math.PI)
ctx.fill()
}
})
container.addEventListener('mouseup',()=>{
toggle=false
})
</script>
</body>
</html>
思路:准备一个画布 一个div盒子 定位到同样的位置,将div的层级变小,画布压住div
擦拭效果是通过canvas的合成配置类型进行完成的
ctx.globalCompositeOperation ='destination-out'
通过事件监听,判断鼠标现在的状态是按下 还是抬起 变更变量的状态
当鼠标按下并且移动的时候出现擦拭效果,点击位置画圆,就ok了