【七夕特别篇】七夕已至，让爱闪耀

👉引言💎

铭记于心🎉✨🎉我唯一知道的，便是我一无所知🎉✨🎉

记录一起走过的那些日子

讲述和亲爱的TA一起经历的那些故事

• 那些初见印象
• 那些浪漫的开始
• 那些铭记于心的大小事
• 那些经历的曲折
• 那些经历的幸福与快乐
• 那些珍贵的瞬间
• 那些对未来的期许/计划 …

创意代码表白

一花一世界，一叶一如来，一曲一场叹，一生为一人。以程序员的方式撒狗粮，专业浪漫，值得拥有！

• 效果演示

制作步骤/过程

• 使用JavaScript代码 写出 绘制原点的函数，用随机算法 模拟 点的散落，然后使用Css进行装饰
• 文字显示是利用将每一个句子以 | 的形式进行分割，然后将每一个字符串，定时进行展现
• 然后以canvas的形式进行绘图

代码文件

正所谓壶里还剩四两酒，二两相思二两愁，为了小伙伴们不因为找不到完整的代码而发愁，在此特地献上源码仓库，详情请见 我的Github仓库

片段讲解:

• 这里简单来说就是先输入一个日期，格式就是MM/DD/YYYY hours/mins/secs,得到一个时间戳timestamp,随后创建一个日期对象,调用库函数去得到目前的系统时间，格式与初试时间格式相同,可以得到一个时间距,最后转换为00天 00小时 00分 00秒的格式，通过css修饰后展现出来

<script language="javascript">functionshow_date_time(){
        window.setTimeout('show_date_time()',1000)
        BirthDay =newDate('6/6/2015 00:00:00')
        today =newDate()
        timeold = today.getTime()- BirthDay.getTime()
        sectimeold = timeold /1000
        secondsold = Math.floor(sectimeold)
        msPerDay =24*60*60*1000
        e_daysold = timeold / msPerDay
        daysold = Math.floor(e_daysold)
        e_hrsold =(e_daysold - daysold)*24
        hrsold = Math.floor(e_hrsold)
        e_minsold =(e_hrsold - hrsold)*60
        minsold = Math.floor((e_hrsold - hrsold)*60)
        seconds = Math.floor((e_minsold - minsold)*60)
        span_dt_dt.innerHTML = daysold +'天'+ hrsold +'小时'+ minsold +'分'+ seconds +'秒'}show_date_time()</script>

• 上面的背景显示就不再赘述,既可以通过<background>标签直接设置背景图片,也可以通过创建 屏幕比例百分之一百的 Canvas画板,绘制背景颜色
• 最后比较关键的一点就是文字的动效是怎样绘制出来的？请先看下面的代码,可以看出这是创建了一个js对象，然后初始化的时候将需要展示的文字传入进去，并且以画板的形式进行初始化

varS={init:function(){S.Drawing.init('.canvas')
          document.body.classList.add('body--ready')// 用|分割S.UI.simulate('！星光闪耀！|！爱必永恒！|#countdown 3|#time|七夕快乐！！')S.Drawing.loop(function(){S.Shape.render()})},}

-最关键的绘图函数就在这里了,我们需要一种方法来在指定时间内执行我们的绘制图形函数,这里通过调用windows的库方法

window.setTimeout( )

, 它能在指定时间内调用指定的函数。接下来就是字符串的切割与拼装,如何用无规则散点的形式在指定的时间内随机组合成每一个文字

S.Drawing =(function(){var canvas,
          context,
          renderFn,
          requestFrame =
            window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||function(callback){
              window.setTimeout(callback,1000/60)}return{init:function(el){
            canvas = document.querySelector(el)
            context = canvas.getContext('2d')this.adjustCanvas()

            window.addEventListener('resize',function(e){S.Drawing.adjustCanvas()})},loop:function(fn){
            renderFn =!renderFn ? fn : renderFn
            this.clearFrame()renderFn()requestFrame.call(window,this.loop.bind(this))},adjustCanvas:function(){
            canvas.width = window.innerWidth -100
            canvas.height = window.innerHeight -30},clearFrame:function(){
            context.clearRect(0,0, canvas.width, canvas.height)},getArea:function(){return{w: canvas.width,h: canvas.height }},drawCircle:function(p, c){
            context.fillStyle = c.render()
            context.beginPath()
            context.arc(p.x, p.y, p.z,0,2* Math.PI,true)
            context.closePath()
            context.fill()},}})()

🌹写在最后💖：
路漫漫其修远兮，吾将上下而求索！伙伴们，再见！🌹🌹🌹