小互动
EasonYi_
热爱,可抵岁月漫长
展开
-
H5 判断页面是否处于前台
平时制作H5互动时会有页面切出去需要关闭音乐或者暂停进度的需求,此段代码可用于浏览器页面是否处于前台的判断。此处用了数组承载监听事件是为了多个组件使用的情况,可自行封装成订阅或注册模式。源码如下:window.pageShowCbList = [];window.pageHideCbList = [];window.onload = () => { pageShowOrHide( () => { for (var i = 0; i <原创 2020-12-27 19:49:28 · 1881 阅读 · 1 评论 -
H5 canvas制作数字连线效果
小时候都玩过数字连线画册,这里我们用canvas将它实现逻辑要点:canvas无法进行回撤操作,即每一步都需要完整的重新绘制为了体验更好此处做了一个简单的矩形范围吸附效果,完善可以更改成圆形范围演示链接:点我源码如下:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>小互动-数字连线</title> <meta nam原创 2020-12-26 19:11:13 · 785 阅读 · 0 评论 -
H5 canvas制作刮刮卡效果并计算清理结果
简要步骤如下1.绘制底图 载体任意DOM CANVAS 图片皆可2.canvas绘制交互区域 纯色或图片皆可3.设定混合模式 “destination-out” 关键4.根据交互情况绘制清理区域计算绘制结果1.原理:检测canvas绘制结果像素点的透明度情况2.要点:像素过多的情况不必每个像素都对应检测 耗时过大 可自行设计采样方式演示链接:https://www.easonyi.com/demo/scratchcards.html源码如下:<!DOCTYPE html>原创 2020-12-26 16:50:45 · 316 阅读 · 0 评论