刮刮卡，现实生活中的刮刮层应该都玩过，这次封装的组件是模拟这种操作的刮刮卡，用到的技术是h5操作画布canvas。
canvas的基本知识点
首先，我们来看一下，刮刮卡用的canvas的基本知识点
- 获取一个平面维度的画布
getContext("2d")
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext("2d")
-
填充画笔填充颜色
fillStyle，参数是十六进制的颜色
ctx. fillStyle ('#aaaaaa') -
绘制矩形
fillRect，参数：矩形左上角x坐标，矩形左上角y坐标，矩形宽度，矩形高度
ctx. fillRect (0, 0, 500, 250) -
画一条线
beginPath() moveTo() lineTo() stroke() closePath()
beginPath(): 表示开始一条路径或者重置一条路径
moveTo参数：初始位置x轴，初始位置y轴
lineTo参数：终止位置x轴，初始位置y轴
stroke()：绘制moveTo和lineTo之间的路径
closePath()：创建从当前点到开始点的路径 -
设置线条粗细
lineWidth
ct.lineWidth = 60 -
设置线条两端的样式
lineCap
ctx.lineCap = "butt"// 默认值，线条两端添加平直的边缘
ctx.lineCap = "round"// 线条两端添加原型线帽
ctx.lineCap = "square"// 线条两端添加正方形线帽 -
设置线条交汇处的样式
lineJoin
ctx. lineJoin = "bevel"// 创建斜角
ctx. lineJoin = "round"// 创建圆角
ctx. lineJoin = "miter"// 创建尖角 -
设置新绘制的图片和旧绘制的图片层级高低
globalCompositeOperation
具体的只有source-over,source-atop,source-in,source-out,destination-over,destination-atop,destination-in,destination-out,lighter,copy,xor
我们现在需要的是，新绘制的图要覆盖在旧绘制图的上面，所以我们需要设置globalCompositeOperation值为destination-out
触摸事件基础知识
touchstart：手指触碰到屏幕
touchmove：手指在屏幕上移动
touchend：手指离开屏幕
实现功能
html结构
<div class="container">
<p></p>
<canvas id="canvasId" width="800" height="200">您的浏览器不支持canvas！</canvas>
</div>
css样式
body{
text-align: center;
}
.container {
margin: 0 auto;
width: 800px;
height: 200px;
position: relative;
}
canvas {
margin: 0 auto;
position: absolute;
left: 0;
top: 0;
}
.container p {
font-size: 60px;
line-height: 200px;
text-align: center;
width: 100%;
}
js逻辑部分
注意，js部分区分移动端和pc端（因为touchstart,touchmove,touchend手势事件在pc端有问题），我们就来探讨一下移动端的
// 获取元素
let canvas = document.getElementById("canvasId"),
award = document.getElementsByTagName("p")[0];
// 设置中奖几率，此处可以自己控制，也可以由后台接口返回中奖内容
let num = 1000 * Math.random(),
result = "谢谢惠顾";
if (num < 100) {
result = "三等奖";
}
if (num < 50) {
result = "二等奖";
}
if (num < 5) {
result = "一等奖";
}
// 到此，中奖内容已经知道，但是需要用户自己刮，才会显示
award.innerText = result;
let ctx = canvas.getContext("2d");
// 绘制背景色，初始背景色设置为灰色（首先绘制一个长方形的灰色块，等着用户来刮）
ctx.fillStyle = "#aaa";
ctx.fillRect(0, 0, 800, 200);
// 设置绘制状态（用户刮的时候的线条设置）
ctx.lineCap = "round"; // 设置线条两端为圆弧
ctx.lineJoin = "round"; // 设置线条转折为圆弧
ctx.lineWidth = 40; // 设置线条宽度40
// 清除新绘制内容和原内容的重叠区域
ctx.globalCompositeOperation = "destination-out";
// 绑定手势
let lx,ly,flag = false
canvas.ontouchstart = function(e) {
flag = true // 设置为可刮状态
// x轴减去90，是因为e.touches[0].pageX获取到的是鼠标的尾部的位置，y轴也是同样如此
lx = e.touches[0].pageX - 90;
ly = e.touches[0].pageY - 60;
}
canvas.ontouchmove = function (e) {
if (flag) {
// 开始绘制图像
ctx.beginPath();
ctx.moveTo(lx, ly);
ctx.lineTo(e.touches[0].pageX - 90, e.touches[0].pageY - 60);
ctx.stroke();
ctx.closePath();
//更新坐标
lx = e.touches[0].pageX - 90;
ly = e.touches[0].page - 60;
}
}
canvas.ontouchend = function (e) {
flag = false; // 设置为不可刮状态
}
到此，移动端的刮刮卡就全部完成了，主要是利用了手势事件，最近一直在写手势的一些方法，有兴趣的可以看看我前两篇文章
h5 实现向左平滑，出现按钮操作，封装组件，模拟购物车左滑删除
h5实现下拉刷新，模拟原生下拉刷新，封装组件
个人觉得这两篇文章封装成组件，适用性更好
有啥想说的，就在下面留言吧，我看到就会回复哒
网友评论