所在位置:
首页 >
营销资讯 >
网站运营 > html5网页实现微信里用数学公式表白,很好玩的创意套路
html5网页实现微信里用数学公式表白,很好玩的创意套路
时间:2023-07-05 05:15:01 | 来源:网站运营
时间:2023-07-05 05:15:01 来源:网站运营
html5网页实现微信里用数学公式表白,很好玩的创意套路:
这是一个隐藏很深的套路,一条超炫酷的创意数学表白方程公式,没见过的人可能不知道如何破解。其实解题方法极其简单:只要擦去公式的上半部分,剩下的部分就是一句完整的i love you,如下图。非常好玩、惊喜、浪漫。我们可以借助强大Html5网页,在手机微信中实现这个创意表白方式,用于 脱单表白 或情侣日常玩点小浪漫都不错哦。
创意背景
I Love You的数学公式最早来源于韩国歌手K.will的一首MV,叫《I need you》。女孩在黑板上写了一个数学公式“128根号e980”,让男主角解答,男主角冥思苦想都算不出来,于是女孩拿起刷子擦掉公式的上半部分,就变成了英文的 I Love You。
表白公式的创意,要如何才能在现实中向喜欢的女生表白呢?带她去教室,演示给她看吗? 这似乎看起来可行性不太强,也不太现实。
借助Html5网页技术,在微信里面也能实现
我们可以借助强大的Html5网页技术,在手机微信中实现这个创意表白方式。例如这里有个案例,可以点击去看看。
怎么样,是不是超惊喜?不需要真的用黑板画出来,只需要一台手机,然后通过二维码 把创意发给她。首先创意伪装得很好,根本看不出来是什么东西。然后提示会引导她擦除公式的上半部分,出来I Love You 以后,就会播放后面的创意视频。
如何制作这样的H5表白网页?
有前端编程基础的朋友可以打开网页,复制代码,稍作修改即可使用。这个Html5表白网页主要是通过canvas画布+js实现,大概原理就是通过canvas画布绘制出公式的上半部分,并且绑定js滑动事件,滑动时清除画布所绘制的图形。
canvas画布
<canvas id="img_up_half" class="" width="500" height="815" style="z-index: 667; display: none;"></canvas>
鼠标事件js
function eventMove(e){ e.preventDefault(); if(mousedown) { var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0; var y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0; ctx.beginPath(); ctx.arc(x, y, 20, 0, Math.PI * 20); ctx.fill(); }}//如果要在移动设备上也实现,需要绑定触摸事件canvas.addEventListener('touchstart', eventDown);canvas.addEventListener('touchend', eventUp);canvas.addEventListener('touchmove', eventMove);
不懂代码的朋友,可以选择更简单的方式:付费购买diy,可以自定义想要表达的文字,换上喜欢的照片 和音乐,还支持设置密码保护隐私,非常好用。