JS前端使用Canvas快速实现手势解锁特效_JavaScript_

/* * this.width=画布宽 * this.height=画布高 * this.starX=星星的大小，宽高相等不做区分 */ spaceX () { // 星星横向间距 return (this.width - this.starX * this.starXNum) / 4 } spaceY () { // 星星纵向间距 return (this.height - this.starX * this.starYNum) / 4 } 

function setData () { // 初始化canvas数据 this.initStarPos() this.lineWidth = 2 // 连接线宽度 this.lineBlurWidth = 6 // 连接线shadow宽 this.canvas = document.getElementById('starMap') if (!this.canvas) return console.error('starMap: this.canvas is null') this.ctx = this.canvas.getContext('2d') this.ctx.strokeStyle = '#c9b8ff' this.ctx.lineCap = 'round' this.ctx.lineJoin = 'bevel' const judgeCanvas = document.getElementById('judgeCanvas') this.judgeCtx = judgeCanvas.getContext('2d') } function initStarPos () { // 初始化星星位置 const arr = this.pointIndexArr = this.initPointShowArr() const pointPos = [] /** * spaceX=横向间距；spaceY：纵向间距 * 星星中点x位置: 星星/2 + (星星的尺寸 + 横向间距）* 前面的星星数量 * 星星中点y位置: 星星/2 + (星星的尺寸 + 竖向间距）* 前面的星星数量 * pointPos=所有页面渲染的星星(x, y)坐标 */ arr.forEach(item => { let x = 0 let y = 0 x = this.starX / 2 + (this.starX + this.spaceX) * (item % this.starXNum) y = this.starX / 2 + (this.starX + this.spaceY) * Math.floor(item / this.starXNum) pointPos.push({ x, y, index: item }) }) this.pointPos = [...pointPos] } function initPointShowArr () { const result = [] const originArr = [] const arrLen = getRandom(25, this.starXNum * this.starYNum, 0) // 可选择随机选择需要显示星星的数量 getRandom(21, 25, 0) const starOriginLen = this.starXNum * this.starYNum for (let i = 0; i < starOriginLen; i++) { originArr.push(i) } // 获取星星展示随机数组后进行排序重组 for (let i = 0; i < arrLen; i++) { const random = Math.floor(Math.random() * originArr.length) if (result.includes(originArr[random])) { continue } result.push(originArr[random]) originArr.splice(random, 1) } result.sort((a, b) => a - b) return result } 

function touchStart (e) { if (this.checkLimit()) return this.lockScroll() const rect = this.$refs.canvas.getBoundingClientRect() // 此处获取canvas位置，防止页面滚动时位置发生变化 this.canvasRect = { x: rect.left, y: rect.top, left: rect.left, right: rect.right, bottom: rect.bottom, top: rect.top } const [x, y] = this.getEventPos(e) const index = this.indexOfPoint(x, y) if (this.pointsLen) { this.reconnectStart = true } else { this.pushToPoints(index) } } function getEventPos (event) { // 当前触摸坐标点相对canvas画布的位置 const x = event.clientX || event.touches[0].clientX const y = event.clientY || event.touches[0].clientY return [x - this.canvasRect.x, y - this.canvasRect.y] } function indexOfPoint (x, y) { if (this.pointPos.length === 0) throw new Error('未找到星星坐标') // 为了减少计算量，将星星当初正方形计算 for (let i = 0; i < this.pointPos.length; i++) { if ((Math.abs(x - this.pointPos[i].x) < this.starX / 1.5) && (Math.abs(y - this.pointPos[i].y) < this.starX / 1.5)) { return i } } return -1 } function pushToPoints (index) { if (index === -1 || this.points.includes(index)) return false this.points.push(index) return true } function checkBeyondCanvas (e) { // 校验手指是否超出canvas区域 const x = e.clientX || e.touches[0].clientX const y = e.clientY || e.touches[0].clientY const { left, top, right, bottom } = this.canvasRect const outDistance = 40 // 放宽边界的判断 if (x < left - outDistance || x > right + outDistance || y < top - outDistance || y > bottom + outDistance) { this.connectEnd() return true } return false } 

 canvas.beginPath() // 表示开始画线或重置当前路径 canvas.moveTo(x, y) // 指定目标路径的开始位置，不创建线条 canvas.lineTo(x, y) // 添加一个新点，创建从该点到画布中最后指定点的线条，不创建线条 canvas.closePath() // 结束路径，应与开始路径呼应 canvas.stroke() // 实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径，默认为黑色 const grd = canvas.createLinearGradient(x1, y1, x2, y2) // 创建线性渐变的起止坐标 grd.addColorStop(0, '#c9b8ff') // 定义从 0 到 1 的颜色渐变 grd.addColorStop(1, '#aa4fff') canvas.strokeStyle = grd 

function touchMove (e) { console.log('touchMove', e) if (this.checkBeyondCanvas(e)) return // 防止touchmove移出canvas区域后不松手，滚动后页面位置改变在canvas外其他位置触发连接 if (this.checkLimit()) return this.lockScroll() // 手指活动过程中禁止页面滚动 const [x, y] = this.getEventPos(e) const idx = this.indexOfPoint(x, y) if (this.reconnectStart && (idx === this.points[this.pointsLen - 1] || idx !== this.points[0])) { this.reconnectStart = false idx === this.points[0] && this.points.reverse() } this.pushToPoints(idx) this.draw(x, y) } function draw (x, y) { if (!this.canvas) return this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) if (this.pointsLen === 0) return this.rearrangePoints(x, y) this.drawLine(x, y) } function drawLine (x, y) { this.ctx.lineWidth = this.lineWidth const startPos = this.getPointPos(0) const endPos = this.getPointPos(this.pointsLen - 1) for (let i = 1; i < this.pointsLen; i++) { const movePos = i === 1 ? startPos : this.getPointPos(i - 1) this.drawradientLine(movePos.x, movePos.y, this.getPointPos(i).x, this.getPointPos(i).y, true) } if (x !== undefined && y !== undefined) { this.drawradientLine(endPos.x, endPos.y, x, y, false) } else { this.ctx.stroke() } } drawradientLine (x1, y1, x2, y2, closePath) { // 渐变线条 if (!this.ctx) return this.ctx.beginPath() this.ctx.moveTo(x1, y1) // 开始位置 this.ctx.lineTo(x2, y2) // 画到此处 const grd = this.ctx.createLinearGradient(x1, y1, x2, y2) // 线性渐变的起止坐标 grd.addColorStop(0, '#c9b8ff') grd.addColorStop(1, '#aa4fff') this.ctx.strokeStyle = grd this.ctx.shadowBlur = this.lineBlurWidth this.ctx.shadowColor = '#5a00ff' closePath && this.ctx.closePath() this.ctx.stroke() }