小互动
关注
分享
扫一扫
EasonYi_
热爱，可抵岁月漫长
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
H5 判断页面是否处于前台
平时制作H5互动时会有页面切出去需要关闭音乐或者暂停进度的需求，此段代码可用于浏览器页面是否处于前台的判断。此处用了数组承载监听事件是为了多个组件使用的情况，可自行封装成订阅或注册模式。 源码如下： window.pageShowCbList = []; window.pageHideCbList = []; window.onload = () => { pageShowOrHide( () => { for (var i = 0; i <原创 2020-12-27 19:49:28 · 2173 阅读 · 1 评论 -
H5 canvas制作数字连线效果
小时候都玩过数字连线画册，这里我们用canvas将它实现 逻辑要点： canvas无法进行回撤操作，即每一步都需要完整的重新绘制 为了体验更好此处做了一个简单的矩形范围吸附效果，完善可以更改成圆形范围 演示链接： 点我 源码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小互动-数字连线</title> <meta nam原创 2020-12-26 19:11:13 · 899 阅读 · 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 · 375 阅读 · 0 评论