标签：offsetX ctx cvs offsetY candraw 简单 刮乐 ev
简单刮刮乐
<!--
* @Author: HuangBingQuan [email protected]
* @Date: 2022-11-15 17:24:09
* @LastEditors: HuangBingQuan [email protected]
* @LastEditTime: 2022-11-20 00:36:37
* @FilePath: /刮刮乐/index.html
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="viewport"
content="
width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no"
/>
<title>刮刮乐</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
position: relative;
width: 400px;
height: 240px;
margin: 30px;
}
.inner {
font-size: 60px;
text-align: center;
line-height: 240px;
background: red;
color: #fff;
}
.cvs {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="inner">一等奖</div>
<canvas class="cvs" width="400" height="240">
您的浏览器不支持请升级浏览器
</canvas>
</div>
<script type="text/javascript">
let cvs = document.querySelector(".cvs");
// console.log(cvs)
let ctx = cvs.getContext("2d");
// 绘制遮罩层
ctx.fillStyle = "#00f";
//填充
ctx.fillRect(0, 0, cvs.width, cvs.height);
ctx.lineWidth = 40;
// 设置线条圆润
ctx.lineCap = "round";
ctx.lineJoin = "round";
// 设置相交之后透明
ctx.globalCompositeOperation = "destination-out";
let candraw = false;
// 鼠标按下
cvs.onmousedown = (e) => {
// console.log(`X:${e.offsetX} Y:${e.offsetY}`)
// 将画笔移动到对应的起点
ctx.moveTo(e.offsetX, e.offsetY);
candraw = true;
};
// 鼠标移动
cvs.onmousemove = (ev) => {
candraw && (ctx.lineTo(ev.offsetX, ev.offsetY), ctx.stroke())
// 移动过程中设置线条的终点 -- 当前鼠标相对画布的位置
// ctx.lineTo(ev.offsetX, ev.offsetY);
// 填充线的颜色 -- 描边
// ctx.stroke();
};
// 鼠标抬起
// cvs.onmouseup = () => (cvs.onmousemove = null);
cvs.onmouseup = () => candraw = false
</script>
</body>
</html>
标签：offsetX,
ctx,
cvs,
offsetY,
candraw,
简单,
刮乐,
ev
From： https://www.cnblogs.com/bingquan1/p/16923741.html