金沙国际官网_金沙国际平台登录

因为这个金沙国际官网_金沙国际平台登录网站与很多的大型澳门赌场都有合作,金沙国际官网_金沙国际平台登录尽职尽责,高效执行,保持好奇心,不断学习,追求卓越,点击进入金沙国际官网_金沙国际平台登录马上体验吧,所以现在也正式地开始了营业。

您的位置:金沙国际官网 > web前端 > 虚假来电,小公式大乐趣

虚假来电,小公式大乐趣

发布时间:2019-11-02 03:20编辑:web前端浏览(72)

    canvas学习笔记:小公式大乐趣

    2014/03/20 · HTML5 · 1 评论 · HTML5

    原文出处: WAxes   

    最近想弄一个网页,把自己学HTML5过程中做的部分DEMO放上去做集合,但是,如果就仅仅做个网页把所有DEMO一个一个排列又觉得太难看了。就想,既然学了canvas,那就来折腾下浏览器,做个小小的开场动画吧。

    开场动画的效果,想了一会,决定用粒子,因为觉得粒子比较好玩。还记得以前我写的第一篇技术博文,就是讲文字图片粒子化的:文字图片粒子化 , 那时就仅仅做的是直线运动,顺便加了一点3D效果。运动公式很简单。所以就想这个开场动画就做的更动感一些吧。

    先上DEMO:

    效果是不是比直线的运动更加动感呢?而且也确实很简单,别忘了这篇博文的题目,小小滴公式,大大滴乐趣。要做出这样的效果,用的就仅仅是我们初中。。或者高中时候的物理知识,加速运动,减速运动的公式啦。所以确实是小小滴公式。楼主很喜欢折腾一些酷炫的东西,虽然可能平时工作上用不上,但是,这乐趣确实很让人着迷啊。而且,做下这些也可以加强一下编程的思维能力哈。

    废话不多说,进入主题啦。就简单的解释一下原理吧~~~

    粒子运动的核心代码就这么一点:

    JavaScript

    update:function(time){ this.x += this.vx*time; this.y += this.vy*time; if(!this.globleDown&&this.y>0){ var yc = this.toy - this.y; var xc = this.tox - this.x; this.jl = Math.sqrt(xc*xc+yc*yc); var za = 20; var ax = za*(xc/this.jl), ay = za*(yc/this.jl), vx = (this.vx+ax*time)*0.97, vy = (this.vy+ay*time)*0.97; this.vx = vx; this.vy = vy; }else { var gravity = 9.8; var vy = this.vy+gravity*time; if(this.y>canvas.height){ vy = -vy*0.7; } this.vy = vy; } },

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    update:function(time){
                this.x += this.vx*time;
                this.y += this.vy*time;
     
                if(!this.globleDown&&this.y>0){
                    var yc = this.toy - this.y;
                    var xc = this.tox - this.x;
     
                    this.jl = Math.sqrt(xc*xc+yc*yc);
     
                    var za = 20;
     
                    var ax = za*(xc/this.jl),
                        ay = za*(yc/this.jl),
                        vx = (this.vx+ax*time)*0.97,
                        vy = (this.vy+ay*time)*0.97;
     
                    this.vx = vx;
                    this.vy = vy;
     
                }else {
                    var gravity = 9.8;
                    var vy = this.vy+gravity*time;
     
                    if(this.y>canvas.height){
                        vy = -vy*0.7;
                    }
     
                    this.vy = vy;
                }
            },

    粒子总共有两种状态,一种是自由落体,一种就是受到吸力。自由落体就不说了。说吸力之前先贴出粒子的属性:

    JavaScript

    var Dot = function(x,y,vx,vy,tox,toy,color){ this.x=x; this.y=y; this.vx=vx; this.vy=vy; this.nextox = tox; this.nextoy = toy; this.color = color; this.visible = true; this.globleDown = false; this.setEnd(tox , toy); } setEnd:function(tox , toy){     this.tox = tox;     this.toy = toy;     var yc = this.toy - this.y;     var xc = this.tox - this.x; },

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    var Dot = function(x,y,vx,vy,tox,toy,color){
            this.x=x;
            this.y=y;
            this.vx=vx;
            this.vy=vy;
            this.nextox = tox;
            this.nextoy = toy;
            this.color = color;
            this.visible = true;
            this.globleDown = false;
            this.setEnd(tox , toy);
        }
     
    setEnd:function(tox , toy){
        this.tox = tox;
        this.toy = toy;
        var yc = this.toy - this.y;
        var xc = this.tox - this.x;
    },

    x,y就是粒子的位置,vx是粒子水平速度,vy是粒子的垂直速度,nexttox之类知不知道都无所谓,只是暂时保存变量的。tox,和toy就是粒子的目的地位置。

    首先,先给予所有粒子一个目的地,这个目的地下面再会说。也就是要粒子到达的地方,然后再定义一个变量za作为加速度,具体数值的话,就自己多测试下就会有大概参数的了,我设成20,感觉就差不多了。za是粒子和目的地之间连线的加速度,所以,我们通过粒子的位置和目的地的位置,通过简单的三角函数,就可以把粒子的水平加速度和垂直加速度求出来了,就这段

    JavaScript

    var ax = za*(xc/this.jl), ay = za*(yc/this.jl),

    1
    2
    var ax = za*(xc/this.jl),
      ay = za*(yc/this.jl),

    有了水平加速度和垂直加速度后,接下来就更简单了,直接计算水平速度和垂直速度的增量,从而改变水平速度和垂直速度的值

    JavaScript

    vx = (this.vx+ax*time)*0.97, vy = (this.vy+ay*time)*0.97;

    1
    2
    vx = (this.vx+ax*time)*0.97,
    vy = (this.vy+ay*time)*0.97;

    之所以要乘于0.97是为了模拟能量损耗,粒子才会减速。time是每一帧的时间差

    计算出速度后就更新粒子位置就行了。

    JavaScript

    this.x += this.vx*time; this.y += this.vy*time;

    1
    2
    this.x += this.vx*time;
    this.y += this.vy*time;

    因为粒子在飞行过程中,与目的地之间的连线方向是不停改变的,所以每一帧都要重新计算粒子的水平加速度和垂直加速度。

    运动原理就是如此,是否很简单呢。

    运动原理说完了,再扯一下上面那个动画的具体实现吧:动画初始化,在一个离屏canvas上把想要的字或者图片画出来,然后再通过getImageData这个方法获取离屏canvas的像素。然后用一个循环,把离屏canvas中有绘制的区域找出来,因为imageData里的data值就是一个rgba数组,所以我们判断最后一个的值也就是透明度大于128就是有绘制过的区域。然后获取该区域的xy值,为了防止粒子对象过多导致页面卡顿,所以我们就限制一下粒子的数量,取像素的时候x值和y值每次递增2,从而减少粒子数量。

    JavaScript

    this.osCanvas = document.createElement("canvas"); var osCtx = this.osCanvas.getContext("2d"); this.osCanvas.width = 1000; this.osCanvas.height = 150; osCtx.textAlign = "center"; osCtx.textBaseline = "middle"; osCtx.font="70px 微软雅黑,黑体 bold"; osCtx.fillStyle = "#1D181F" osCtx.fillText("WelCome" , this.osCanvas.width/2 , this.osCanvas.height/2-40); osCtx.fillText("To wAxes' HOME" , this.osCanvas.width/2 , this.osCanvas.height/2+40); var bigImageData = osCtx.getImageData(0,0,this.osCanvas.width,this.osCanvas.height); dots = []; for(var x=0;x<bigImageData.width;x+=2){ for(var y=0;y<bigImageData.height;y+=2){ var i = (y*bigImageData.width + x)*4; if(bigImageData.data[i+3]>128){ var dot = new Dot( Math.random()>0.5?Math.random()*20+10:Math.random()*20+canvas.width-40, -Math.random()*canvas.height*2, 0, 0, x+(canvas.width/2-this.osCanvas.width/2), y+(canvas.height/2-this.osCanvas.height/2), "rgba("+bigImageData.data[i]+","+bigImageData.data[i+1]+","+bigImageData.data[i+2]+",1)" ); dot.setEnd(canvas.width/2,canvas.height/2) dots.push(dot); } } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    this.osCanvas = document.createElement(&quot;canvas&quot;);
            var osCtx = this.osCanvas.getContext(&quot;2d&quot;);
     
            this.osCanvas.width = 1000;
            this.osCanvas.height = 150;
     
            osCtx.textAlign = &quot;center&quot;;
            osCtx.textBaseline = &quot;middle&quot;;
            osCtx.font=&quot;70px 微软雅黑,黑体 bold&quot;;
            osCtx.fillStyle = &quot;#1D181F&quot;
            osCtx.fillText(&quot;WelCome&quot; , this.osCanvas.width/2 , this.osCanvas.height/2-40);
            osCtx.fillText(&quot;To wAxes&#039; HOME&quot; , this.osCanvas.width/2 , this.osCanvas.height/2+40);
            var bigImageData = osCtx.getImageData(0,0,this.osCanvas.width,this.osCanvas.height);
     
            dots = [];
     
            for(var x=0;x&lt;bigImageData.width;x+=2){
                for(var y=0;y&lt;bigImageData.height;y+=2){
                    var i = (y*bigImageData.width + x)*4;
                    if(bigImageData.data[i+3]&gt;128){
                        var dot = new Dot(
                            Math.random()&gt;0.5?Math.random()*20+10:Math.random()*20+canvas.width-40,
                            -Math.random()*canvas.height*2,
                            0,
                            0,
                            x+(canvas.width/2-this.osCanvas.width/2),
                            y+(canvas.height/2-this.osCanvas.height/2),
                            &quot;rgba(&quot;+bigImageData.data[i]+&quot;,&quot;+bigImageData.data[i+1]+&quot;,&quot;+bigImageData.data[i+2]+&quot;,1)&quot;
                        );
                        dot.setEnd(canvas.width/2,canvas.height/2)
                        dots.push(dot);
                    }
                }
            }

    通过循环获取到粒子的位置xy值后,把位置赋给粒子,成为粒子的目的地。然后动画开始,就可以做出文字图片粒子化的效果了。

    下面贴出动画实现的js代码。如果对其他代码也有兴趣的,可以直接看控制台哈,没压缩的。

    JavaScript

    var part_1 = (function(w){ var dots = [],DOT_SIZE = 2,cube=null; var Dot = function(x,y,vx,vy,tox,toy,color){ this.x=x; this.y=y; this.vx=vx; this.vy=vy; this.nextox = tox; this.nextoy = toy; this.color = color; this.visible = true; this.globleDown = false; this.setEnd(tox , toy); } Dot.prototype = { paint:function(){ ctx.fillStyle=this.color; ctx.fillRect(this.x-DOT_SIZE/2 , this.y-DOT_SIZE/2 , DOT_SIZE , DOT_SIZE); }, setEnd:function(tox , toy){ this.tox = tox; this.toy = toy; var yc = this.toy - this.y; var xc = this.tox - this.x; // this.initjl = Math.sqrt(xc*xc+yc*yc); }, update:function(time){ this.x += this.vx*time; this.y += this.vy*time; if(!this.globleDown&&this.y>0){ var yc = this.toy - this.y; var xc = this.tox - this.x; this.jl = Math.sqrt(xc*xc+yc*yc); var za = 20; var ax = za*(xc/this.jl), ay = za*(yc/this.jl), vx = (this.vx+ax*time)*0.97, vy = (this.vy+ay*time)*0.97; this.vx = vx; this.vy = vy; // if(Math.abs(this.vx)<1&&Math.abs(this.vy)<1){ // this.y = this.toy // this.x = this.tox // } }else { var gravity = 9.8; var vy = this.vy+gravity*time; if(this.y>canvas.height){ vy = -vy*0.7; } this.vy = vy; } }, loop:function(time){ this.update(time); this.paint(); } } var animate = function(){ this.state = "before" } var ap = animate.prototype; ap.init = function(){ this.osCanvas = document.createElement("canvas"); var osCtx = this.osCanvas.getContext("2d"); this.osCanvas.width = 1000; this.osCanvas.height = 150; osCtx.textAlign = "center"; osCtx.textBaseline = "middle"; osCtx.font="70px 微软雅黑,黑体 bold"; osCtx.fillStyle = "#1D181F" osCtx.fillText("WelCome" , this.osCanvas.width/2 , this.osCanvas.height/2-40); osCtx.fillText("To wAxes' HOME" , this.osCanvas.width/2 , this.osCanvas.height/2+40); var bigImageData = osCtx.getImageData(0,0,this.osCanvas.width,this.osCanvas.height); dots = []; for(var x=0;x<bigImageData.width;x+=2){ for(var y=0;y<bigImageData.height;y+=2){ var i = (y*bigImageData.width + x)*4; if(bigImageData.data[i+3]>128){ var dot = new Dot( Math.random()>0.5?Math.random()*20+10:Math.random()*20+canvas.width-40, -Math.random()*canvas.height*2, 0, 0, x+(canvas.width/2-this.osCanvas.width/2), y+(canvas.height/2-this.osCanvas.height/2), "rgba("+bigImageData.data[i]+","+bigImageData.data[i+1]+","+bigImageData.data[i+2]+",1)" ); dot.setEnd(canvas.width/2,canvas.height/2) dots.push(dot); } } } console.log(dots.length) } ap.changeState = function(){ var osCtx = this.osCanvas.getContext("2d"); osCtx.clearRect(0,0,this.osCanvas.width,this.osCanvas.height); this.osCanvas.width = 460; this.osCanvas.height = 100; osCtx.fillStyle="#5C5656" osCtx.fillRect(20,20,60,60) drawLogo(this.osCanvas , osCtx); var bigImageData = osCtx.getImageData(0,0,this.osCanvas.width,this.osCanvas.height); var index=0; dots.sort(function(a , b){ return Math.random()-Math.random(); }) for(var x=0;x<bigImageData.width;x+=2){ for(var y=0;y<bigImageData.height;y+=2){ var i = (y*bigImageData.width + x)*4; if(bigImageData.data[i+3]>128){ var d = dots[index]; if(d){ d.setEnd(x+(canvas.width/2-300) , y+50) d.color = "rgba("+bigImageData.data[i]+","+bigImageData.data[i+1]+","+bigImageData.data[i+2]+",1)"; index++ } } } } setTimeout(function(){ var endindex = index; for(var i=0;i<dots.length-endindex;i++){ if(dots[index]){ var d = dots[index]; d.globleDown = true; d.vx = Math.random()*100-50; } index++; } } , 2000) } function endState(){ canvas.width = 600; canvas.height = 100; canvas.style.display="block"; canvas.style.top = "50px"; canvas.style.left = (window.innerWidth-canvas.width)/2+"px"; cube = new Cube(50); cube._initVector(50,50); } function drawLogo(canvas , ctx){ ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.font="65px 微软雅黑,黑体 bold" ctx.fillStyle="#E06D2F" ctx.fillText("DEMO" , 300 , canvas.height/2) ctx.font="40px 微软雅黑,黑体 bold" ctx.fillStyle="#405159" ctx.fillText("吖猩的" , 160 , canvas.height/2) ctx.fillText("小窝" , 420 , canvas.height/2) } var num = 0; ap.update = function(time){ time = time/100; if(this.state==="first"||this.state==="before"){ var completeNum = 0; dots.forEach(function(dot){ if(dot.visible) dot.loop(time); if(dot.jl<5){ completeNum++ } }); if(completeNum>=5*dots.length/6){ if(this.state==="before"){ this.state = "first"; dots.forEach(function(dot){ dot.setEnd(dot.nextox , dot.nextoy); }); }else { this.state = "second"; this.changeState(); } } }else if(this.state==="second"){ var completeNum = 0, allnum = 0; dots.forEach(function(dot){ if(dot.visible) dot.loop(time); if(dot.globleDown){ allnum++; if(Math.abs(dot.y-canvas.height)<2){ completeNum++ } } }); if(completeNum===allnum&&allnum!==0){ this.state = "third"; part_2.animate(); endState(); } }else if(this.state==="third"){ cube.update(); drawLogo(canvas , ctx); } } return new animate(); })(window)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    var part_1 = (function(w){
        var dots = [],DOT_SIZE = 2,cube=null;
     
        var Dot = function(x,y,vx,vy,tox,toy,color){
            this.x=x;
            this.y=y;
            this.vx=vx;
            this.vy=vy;
            this.nextox = tox;
            this.nextoy = toy;
            this.color = color;
            this.visible = true;
            this.globleDown = false;
            this.setEnd(tox , toy);
        }
     
        Dot.prototype = {
            paint:function(){
                ctx.fillStyle=this.color;
                ctx.fillRect(this.x-DOT_SIZE/2 , this.y-DOT_SIZE/2 , DOT_SIZE , DOT_SIZE);
            },
     
            setEnd:function(tox , toy){
                this.tox = tox;
                this.toy = toy;
                var yc = this.toy - this.y;
                var xc = this.tox - this.x;
                // this.initjl = Math.sqrt(xc*xc+yc*yc);
            },
     
            update:function(time){
                this.x += this.vx*time;
                this.y += this.vy*time;
     
                if(!this.globleDown&amp;&amp;this.y&gt;0){
                    var yc = this.toy - this.y;
                    var xc = this.tox - this.x;
     
                    this.jl = Math.sqrt(xc*xc+yc*yc);
     
                    var za = 20;
     
                    var ax = za*(xc/this.jl),
                        ay = za*(yc/this.jl),
                        vx = (this.vx+ax*time)*0.97,
                        vy = (this.vy+ay*time)*0.97;
     
                    this.vx = vx;
                    this.vy = vy;
     
                    // if(Math.abs(this.vx)&lt;1&amp;&amp;Math.abs(this.vy)&lt;1){
                    //     this.y = this.toy
                    //     this.x = this.tox
                    // }
                }else {
                    var gravity = 9.8;
                    var vy = this.vy+gravity*time;
     
                    if(this.y&gt;canvas.height){
                        vy = -vy*0.7;
                    }
     
                    this.vy = vy;
                }
            },
     
            loop:function(time){
                this.update(time);
                this.paint();
            }
        }
     
        var animate = function(){
            this.state = &quot;before&quot;
        }
     
        var ap = animate.prototype;
     
        ap.init = function(){
            this.osCanvas = document.createElement(&quot;canvas&quot;);
            var osCtx = this.osCanvas.getContext(&quot;2d&quot;);
     
            this.osCanvas.width = 1000;
            this.osCanvas.height = 150;
     
            osCtx.textAlign = &quot;center&quot;;
            osCtx.textBaseline = &quot;middle&quot;;
            osCtx.font=&quot;70px 微软雅黑,黑体 bold&quot;;
            osCtx.fillStyle = &quot;#1D181F&quot;
            osCtx.fillText(&quot;WelCome&quot; , this.osCanvas.width/2 , this.osCanvas.height/2-40);
            osCtx.fillText(&quot;To wAxes&#039; HOME&quot; , this.osCanvas.width/2 , this.osCanvas.height/2+40);
            var bigImageData = osCtx.getImageData(0,0,this.osCanvas.width,this.osCanvas.height);
     
            dots = [];
     
            for(var x=0;x&lt;bigImageData.width;x+=2){
                for(var y=0;y&lt;bigImageData.height;y+=2){
                    var i = (y*bigImageData.width + x)*4;
                    if(bigImageData.data[i+3]&gt;128){
                        var dot = new Dot(
                            Math.random()&gt;0.5?Math.random()*20+10:Math.random()*20+canvas.width-40,
                            -Math.random()*canvas.height*2,
                            0,
                            0,
                            x+(canvas.width/2-this.osCanvas.width/2),
                            y+(canvas.height/2-this.osCanvas.height/2),
                            &quot;rgba(&quot;+bigImageData.data[i]+&quot;,&quot;+bigImageData.data[i+1]+&quot;,&quot;+bigImageData.data[i+2]+&quot;,1)&quot;
                        );
                        dot.setEnd(canvas.width/2,canvas.height/2)
                        dots.push(dot);
                    }
                }
            }
            console.log(dots.length)
        }
     
        ap.changeState = function(){
            var osCtx = this.osCanvas.getContext(&quot;2d&quot;);
            osCtx.clearRect(0,0,this.osCanvas.width,this.osCanvas.height);
            this.osCanvas.width = 460;
            this.osCanvas.height = 100;
     
            osCtx.fillStyle=&quot;#5C5656&quot;
            osCtx.fillRect(20,20,60,60)
     
            drawLogo(this.osCanvas , osCtx);
     
            var bigImageData = osCtx.getImageData(0,0,this.osCanvas.width,this.osCanvas.height);
     
            var index=0;
            dots.sort(function(a , b){
                return Math.random()-Math.random();
            })
            for(var x=0;x&lt;bigImageData.width;x+=2){
                for(var y=0;y&lt;bigImageData.height;y+=2){
                    var i = (y*bigImageData.width + x)*4;
                    if(bigImageData.data[i+3]&gt;128){
                            var d = dots[index];
                            if(d){
                                d.setEnd(x+(canvas.width/2-300) , y+50)
                                d.color = &quot;rgba(&quot;+bigImageData.data[i]+&quot;,&quot;+bigImageData.data[i+1]+&quot;,&quot;+bigImageData.data[i+2]+&quot;,1)&quot;;
                                index++
                            }
                    }
                }
            }
     
            setTimeout(function(){
                var endindex = index;
                for(var i=0;i&lt;dots.length-endindex;i++){
                    if(dots[index]){
                        var d = dots[index];
     
                        d.globleDown = true;
                        d.vx = Math.random()*100-50;
                    }
                    index++;
                }
            } , 2000)
        }
     
        function endState(){
            canvas.width = 600;
            canvas.height = 100;
            canvas.style.display=&quot;block&quot;;
            canvas.style.top = &quot;50px&quot;;
            canvas.style.left = (window.innerWidth-canvas.width)/2+&quot;px&quot;;
            cube = new Cube(50);
            cube._initVector(50,50);
        }
     
        function drawLogo(canvas , ctx){
            ctx.textAlign = &quot;center&quot;;
            ctx.textBaseline = &quot;middle&quot;;
            ctx.font=&quot;65px 微软雅黑,黑体 bold&quot;
            ctx.fillStyle=&quot;#E06D2F&quot;
            ctx.fillText(&quot;DEMO&quot; , 300 , canvas.height/2)
     
            ctx.font=&quot;40px 微软雅黑,黑体 bold&quot;
            ctx.fillStyle=&quot;#405159&quot;
            ctx.fillText(&quot;吖猩的&quot; , 160 , canvas.height/2)
            ctx.fillText(&quot;小窝&quot; , 420 , canvas.height/2)
        }
     
        var num = 0;
        ap.update = function(time){
            time = time/100;
            if(this.state===&quot;first&quot;||this.state===&quot;before&quot;){
                var completeNum = 0;
                dots.forEach(function(dot){
                    if(dot.visible) dot.loop(time);
                    if(dot.jl&lt;5){
                        completeNum++
                    }
                });
                if(completeNum&gt;=5*dots.length/6){
     
                    if(this.state===&quot;before&quot;){
                        this.state = &quot;first&quot;;
                        dots.forEach(function(dot){
                            dot.setEnd(dot.nextox , dot.nextoy);
                        });
                    }else {
                        this.state = &quot;second&quot;;
                        this.changeState();
                    }
                }
            }else if(this.state===&quot;second&quot;){
                var completeNum = 0,
                    allnum = 0;
                dots.forEach(function(dot){
                    if(dot.visible) dot.loop(time);
                    if(dot.globleDown){
                        allnum++;
                        if(Math.abs(dot.y-canvas.height)&lt;2){
                            completeNum++
                        }
                    }
                });
     
                if(completeNum===allnum&amp;&amp;allnum!==0){
                    this.state = &quot;third&quot;;
                    part_2.animate();
                    endState();
                }
            }else if(this.state===&quot;third&quot;){
                cube.update();
                drawLogo(canvas , ctx);
            }
        }
     
        return new animate();
    })(window)

    赞 1 收藏 1 评论

    图片 1

    一篇真正教会你开发移动端页面的文章(二)

    2017/12/07 · 基础技术 · 移动端

    原文出处: HcySunYang   

    虚假来电:HTML5振动API的恶意使用

    2014/01/16 · HTML5 · 3 评论 · HTML5

    本文由 伯乐在线 - 梧桐 翻译。未经许可,禁止转载!
    英文出处:Terence Eden。欢迎加入翻译组。

    一个新的API出来了。HTML5 (很快)将支持用户设备振动。这明显是很有趣的事情,比如它可以用户触发提醒,提升游戏体验,以及其他各种好玩的事情,例如通过振动发送摩斯代码。

    到目前为止,Chrome(以及其他Android浏览器)要使用位置信息、摄像头、地址簿等资源必须申请权限。这是一种安全措施防止你的个人信息在未授权的情况下泄露。

    而现在使用HTML5振动API并不会在屏幕上触发警告。因为一般认为用这个功能几乎没有危害,毕竟在现实中它能干的坏事无非是持续消耗电量。事实就是这样简单吗?我不敢肯定。

    移动端开发的干货篇

    之前写了一篇文章《一篇真正教会你开发移动端一面的文章(一)》/)。那是本篇文章的基础,如果没有阅读过的同学可以去看看,今天就给大家带来干货,真真正正的讲到如何很好的开发一个移动端的页面

    图片 2

    好了,让我们开始吧,从哪里开始呢?从设计图开始,即PSD稿件:
    移动端PSD稿件的尺寸肯定较之PC端的PSD稿件不同,具体体现在设计图的尺寸上,现在移动端的设计图尺寸大多以iPhone5和iPhone6的设备像素尺寸作为依据,比如拿到一张PSD设计图,它的总宽度为640px(iPhone5)或者750px(iPhone6)。本例就拿iPhone6的设计图尺寸为标准进行讲解,其它设计图尺寸道理是一样的,这并不影响我们的开发。

    首先我们要有一张设计图才行,看下图,假设我们有一张设计图,它很简单,只有一个红色的方块:

    图片 3

    拿到了设计图,于是你开开心心的开始写代码了,你打开了编辑器,并写下了如下HTML代码:

    JavaScript

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> </head> <body> <div class="box"></div> </body> </html>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    </head>
    <body>
     
        <div class="box"></div>
     
    </body>
    </html>

    HTML代码写好了,你用了一个带有box类的div标签作为ps稿中的红色块,经过尺寸测量,你为上面代码添加了CSS样式,最后你的代码是这样的:

    JavaScript

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <style> body{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; } </style> </head> <body> <div class="box"></div> </body> </html>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
        <style>
        body{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background: red;
        }
        </style>
    </head>
    <body>
     
        <div class="box"></div>
     
    </body>
    </html>

    上面的代码中,你只是在原来的基础上增加了CSS样式,首先你清除了body标签上的默认样式,这个没什么好说的,然后你根据设计图中测量的尺寸来给box编写样式,宽200px;高200px;背景红色。看上去并没有什么问题,于是你开开心心的打开浏览器,刷新页面,你的脸色沉了下来,因为你看到了你不想看到的结果,如下图,上图为设计稿的样式,下图为你编写的html文件的样式:

    图片 4

    图片 5

    通过对比psd原稿和我们目前所写的html页面,可以看出我们html页面的问题,红色方块与整个页面的比例和psd原稿不一样啊,那么为什么我们明明是按照原稿测量的尺寸写出来的代码却和psd原稿显示的效果不一样呢?别忘了,psd原稿的尺寸是按照设备像素设计的,由于我们所用的设计稿是基于iPhone6设计的,所以我们设计稿的尺寸就是iPhone6的设备像素的尺寸,也就是750px,而我们CSS中的样式是基于布局视口的尺寸计算的,由于我们html页面中由于写入了以下meta标签:

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

    1
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

    在上一篇我们讲过, width=device-width 这段代码是让布局视口的尺寸等于理想视口。
    根据公式(缩放比例为1):
    设备像素比(DPR) = 设备像素个数 / 理想视口像素个数(device-width)
    因为iPhone6的DPR(设备像素比)为2,设备像素为750,所以iPhone6的理想视口尺寸为375px。所以上面代码最终导致的是:使我们布局视口的宽度变成了375px。而我们CSS中编写的样式尺寸又是基于布局视口计算的,所以我们得到的页面看上去比例不对,如下图:

    图片 6
    图片 7

    如上面两幅图片,我们知道,psd稿的总宽是750px,元素宽200px,而我们真正做页面的时候,布局视口的宽度是375px,正好是设计稿的一半。所以我们不能直接使用设计稿上面测量所得的像素尺寸,根据比例,我们应该将测量所得的尺寸除以2,才是我们CSS中布局所用的尺寸,据此,我们将200px除以2得到100px,于是我们修改代码,将红色方块的宽高都设为100px,刷新页面,看看比例是不是和设计图一样了?答案是肯定的,如下图为修改后的html页面:

    图片 8

    这样,我们就得到了正确的数据,并且正确的写出了页面,你很高兴,可是问题来了,如果你在做页面的时候,测量了一个元素的宽度,宽度是一个奇数,比如111像素,按照我们之前的做法是,将测量到的数据除以2,得到我们真正使用的数据,所以111除以2等于55.5px,我们知道,计算机(手机)没办法显示不到一个像素的像素值,计算机(手机)会自动将其补全为一个像素进行显示,所以最终会将元素显示为56像素,这并不是我们想要的结果。
    另外,我们的设计稿是基于iphone6设计的,我们调试页面也是在iphone6下调试的。又因为iphone6的设备像素比试2,所以我们才能由设计稿测量的数据除以2后直接使用,并且在iphone6下没有问题,但是你要知道,并不是所有手机的设备像素比都是2,有的手机的设备像素比试2.5或者3。并且不同设备的设备像素又不同,这样就导致理想视口的尺寸不同,从而导致布局视口的尺寸不同,那么我们直接根据iphone6的设计稿尺寸除以2得到的尺寸用来编写CSS是不能在所有设备下完好显示的。

    所以,我们要换一个方法。
    于是我们想到:如果我们能将布局视口的尺寸设置为和设备像素尺寸相等的话,这样我们就保证了设计图与页面的1:1关系,那么我们就可以直接使用psd中测量的尺寸了,然后在其他尺寸的手机中,我们进行等比缩放就ok了。那么如何才能让布局视口的尺寸等于设备像素尺寸呢?

    我们注意到meta标签中的 width=device-width 这段代码,首先你要明白这句话的意思,前面讲过,这句话最终导致的结果是:让布局视口的尺寸等于理想视口的尺寸。言外之意就是,在代码 width=device-width 中:

    width:是布局视口的width
    device-width:是理想视口的宽度

    根据公式(缩放比例为1):

    设备像素比(DPR) = 设备像素个数 / 理想视口像素个数(device-width)

    以iphone6为例:
    设备像素比(DPR):2
    设备像素个数:750
    所以在缩放比例为1的情况下,iphone6理想视口的像素个数为 750 / 2 = 375,也就是说,对于iphone6来讲 device-width的值为375

    所以我们通过width=device-width这句话,间接的将布局视口的尺寸设为了375,也就是说,如果我们能改变理想视口的尺寸,也就改变了布局适口的尺寸,如何改变理想视口的尺寸呢?这就要讲到缩放了,上一篇我们讲到过缩放,缩放是缩小或放大CSS像素的过程,以iphone6为例,当我们缩放比例为1:1的时候,由于iphone6的设备像素比为2,所以iphone6的设备像素与CSS像素的关系看起来就像下图这样:

    图片 9

    一个CSS像素宽度等于两个设备像素宽度,所以750px的设备宽度的布局视口为357CSS像素。这是在缩放比例为1的情况下,既然缩放可以放大或缩小CSS像素,所以如果我们将CSS像素的宽度缩放至与设备像素宽度相等了,那么750个设备像素也就能显示750个CSS像素,缩放后的设备像素与CSS像素看起来应该像下图这样:

    图片 10

    但是,我们的缩放倍数是多少呢?在缩放比例为1的时候,一个CSS像素的宽度 = 两个设备像素的宽度,如果我们想让 一个CSS像素的宽度 = 一个设备像素的宽度,我们就要将CSS像素缩小为原来的0.5倍,实际上,我们缩小的倍数 = 设备像素比的倒数。
    于是,我们修改上面的HTML代码(修改了meta标签):

    JavaScript

    <html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,user-scalable=no" /> <style> body{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; } </style> </head> <body> <div class="box"></div> </body> </html>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,user-scalable=no" />
        <style>
        body{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background: red;
        }
        </style>
    </head>
    <body>
     
        <div class="box"></div>
     
    </body>
    </html>

    注意,上面代码中我们给红色方块使用的CSS尺寸直接使用的是psd稿中测量的尺寸,我们刷新页面,怎么样?满意吧:

    图片 11

    但是我们这是有个前提的,那就是缩放0.5倍只适用于设备像素比为2的设备(因为缩放值 = 1 / 设备像素比)。所以,为了适应所有的设备,我们应该用javascript代码动态生成meta标签:

    var scale = 1 / window.devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale='

    • scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    1
    2
    var scale = 1 / window.devicePixelRatio;
    document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

    其中 window.devicePixelRatio 的值为设备像素比。
    于是我们的代码变成了这样:

    JavaScript

    <html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="" /> <style> body{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; } </style> </head> <body> <div class="box"></div> <script> var scale = 1 / window.devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale='

    • scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); </script> </body> </html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <meta name="viewport" content="" />
        <style>
        body{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background: red;
        }
        </style>
    </head>
    <body>
     
        <div class="box"></div>
     
        <script>
        var scale = 1 / window.devicePixelRatio;
        document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        </script>
    </body>
    </html>

    上面的代码最终能保证一个问题,那就是无论任何设备,布局视口的宽度总是等于设备像素。
    这样,我们在设计图中测量为200px的宽度就能直接用在CSS中了,并且在iphone6中显示完好,可是别忘了,我们的设计图就是根据iphone6设计的,如果换做其他设备,还能显示完好么?我们不妨试一下,如下图,是上面代码在iphone5和iphone6下的对比:

    图片 12

    图片 13

    我们发现,无论是五还是6,即使设备像素变了,即屏幕宽度变了,可是红色方块的宽度并没有变,这并不是一个好的现象,因为这样页面的元素就不成比例了,会影响到布局,所以我们要想办法让我们页面的元素跟着设备变化而等比缩放,这就是我们要解决的第二个问题,怎么实现呢?这就要讲到rem的知识点了。

    邪念

    我们都看过那种无耻的广告做得跟Windows弹出窗一模一样,它们通常发出一个正当的系统请求:更新Java或类似的。

    假如一个恶意网页弹出一个虚假的系统提示并同时振动,你有多大的信心能区分一个合法的弹出框和一个png图片?毕竟手机振动了,你就会认为它是真实的系统提示。

    图片 14

    (图1)

    这时候你是收到了一个“空投”炸弹,还是说网页在跟你开个小玩笑?

    页面广告自动播放声音本来就很烦人了。自动振动跟它比起来毫不逊色。回想一下你在满屏幕搜索那个推销保险的广告。

    目前振动的强度还不能控制,只能控制持续时间。当然通过构造恶意代码去突破没打补丁的浏览器也不是不可能的,甚至可以让电机持续高负荷运转直到损坏。

    rem

    什么是rem?
    rem是相对尺寸单位,相对于html标签字体大小的单位,举个例子:
    如果html的font-size = 18px;
    那么1rem = 18px,需要记住的是,rem是基于html标签的字体大小的。

    相信你已经明白了,对没错,我们要把之前用px做元素尺寸的单位换成rem,所以,现在的问题就是如果转换,因为rem是根据html标签的font-size值确定的,所以我们只要确定html标签的font-size值就行了,我们首先自己定一个标准,就是让font-size的值等于设备像素的十分之一,即:

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

    1
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

    以iphone6为例,html标签的font-size的值就等于 750 / 10 = 75px 了,这样 1rem = 75px,所以红色方块200px换算为rem单位就是 200 / 75 = 2.6666667rem。
    那么在iphone5中呢?因为iphone5的设备像素为640,所以iphone的html标签的font-size的值为 640 / 10 = 64px,所以 1rem = 64px,所以在iphone6中显示为200px的元素在iphone5中会显示为 2.6666667 * 64 像素,这样,在不同设备中就实现了让元素等比缩放从而不影响布局。而上面的方法也是手机淘宝所用的方法。所以,现在你只需要将你测量的尺寸数据除以75就转换成了rem单位,如果是iPhone5就要除以64,即除以你动态设置的font-size的值。

    另外需要注意的是:做页面的时候文字字体大小不要用rem换算,还是使用px做单位。后面会讲到。

    让我们来总结一下我们现在了解的方法:

    1、将布局视口大小设为设备像素尺寸:

    var scale = 1 / window.devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale='

    • scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    1
    2
    var scale = 1 / window.devicePixelRatio;
    document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

    2、动态设置html字体大小:

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

    1
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

    3、将设计图中的尺寸换算成rem

    元素的rem尺寸 = 元素的psd稿测量的像素尺寸 / 动态设置的html标签的font-size值

    说了一大堆,其实我们使用下面的html莫板就可以写页面了,唯一需要你做的就是计算元素的rem尺寸,所以即使你没看懂上面的讲述也不重要,你只要将莫板拿过去用就好了:

    JavaScript

    <html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="" /> </head> <body> <script> var scale = 1 / window.devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale='

    • scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'; </script> </body> </html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <meta name="viewport" content="" />
    </head>
    <body>
     
     
     
        <script>
        var scale = 1 / window.devicePixelRatio;
        document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
     
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
        </script>
    </body>
    </html>

    现在我们使用上面的方法修改我们的代码如下:

    JavaScript

    <html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="" /> <style> body{ margin: 0; padding: 0; } .box{ width: 2.66666667rem; height: 2.66666667rem; background: red; } </style> </head> <body> <div class="box"></div> <script> var scale = 1 / window.devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale='

    • scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'; </script> </body> </html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <meta name="viewport" content="" />
        <style>
        body{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 2.66666667rem;
            height: 2.66666667rem;
            background: red;
        }
        </style>
    </head>
    <body>
     
        <div class="box"></div>
     
        <script>
        var scale = 1 / window.devicePixelRatio;
        document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
     
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
        </script>
    </body>
    </html>

    打开浏览器,分别在iPhone6和iPhone5下查看页面,我们会发现,现在的元素可以根据手机的尺寸不同而等比缩放了。

    上面的方法是手机淘宝的方法,有一个缺点,就是转化rem单位的时候,需要除以font-size的值,淘宝用的是iPhone6的设计图,所以淘宝转换尺寸的时候要除以75,这个值可不好算,所以还要借用计算器来完成,影响开发效率,另外,在转还rem单位时遇到除不尽的数时我们会采用很长的近似值比如上面的2.6666667rem,这样可能会使页面元素的尺寸有偏差。

    除了上面的方法比较通用之外,还有一种方式,我们来重新思考一下:

    上面做页面的思路是:拿到设计图,比如iPhone6的设计图,我们就将浏览器设置到iPhone6设备调试,然后使用js动态修改meta标签,使布局视口的尺寸等于设计图尺寸,也就是设备像素尺寸,然后使用rem替代px做尺寸代为,使得页面在不同设备中等比缩放。

    现在假如我们不去修改meta标签,正常使用缩放为1:1的meta标签,即使用如下meta标签:

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

    1
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

    还以iPhone6为例,我们知道,在缩放为1:1的情况下,根据公式:

    设备像素比(DPR) = 设备像素个数 / 理想视口像素个数(device-width)

    我们知道:
    设备像素 = 设计图尺寸 = 750px
    布局视口 = 375px

    假设我们以iPhone6设计图尺寸为标准,在设计图的尺寸下设置一个font-size值为100px。
    也就是说:750px宽的页面,我们设置100px的font-size值,那么页面的宽度换算为rem就等于 750 / 100 = 7.5rem。

    我们就以页面总宽为7.5rem为标准,那么在布局视口中,也就是页面总宽为375px下,font-size值应该是多少?很简单:

    font-size = 375 / 7.5 = 50px

    那么在iPhone5下呢?因为iPhone5的布局视口宽为320px,所以如果页面总宽以7.5为标准,那么iPhone5下我们设置的font-size值应该是:

    font-size = 320 / 7.5 =42.666666667px

    也就是说,不管在什么设备下,我们都可以把页面的总宽度设为一个以rem为单位的定值,比如本例就是7.5rem,只不过,我们需要根据布局视口的尺寸动态设置font-size的值:

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

    1
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

    这样,无论在什么设备下,我们页面的总宽度都是7.5rem,所以我们直接在设计图上测量px单位的尺寸,然后除以100转换成rem单位后直接使用就可以了,比如,在iPhone6设计图中测量一个元素的尺寸为200px,那么转换成rem单位就是 200 / 100 = 2rem,因为在不同设备下我们动态设置了html标签的font-size值,所以不同设备下相同的rem值对应的像素值是不同的,这样就实现了在不同设备下等比缩放。我们修改html代码如下:

    JavaScript

    <html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" /> <style> body{ margin: 0; padding: 0; } .box{ width: 2rem; height: 2rem; background: red; } </style> </head> <body> <div class="box"></div> <script> document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'; </script> </body> </html>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
        <style>
        body{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 2rem;
            height: 2rem;
            background: red;
        }
        </style>
    </head>
    <body>
     
        <div class="box"></div>
     
        <script>
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
        </script>
    </body>
    </html>

    刷新页面,分别在iPhone6和iPhone5下调试查看结果,会发现如下图,使我们想要的效果,等比缩放,ok,实际上这种做法也是网易的做法:

    图片 15

    图片 16

    下面,我们来总结一下第二种做法:

    1、拿到设计图,计算出页面的总宽,为了好计算,取100px的font-size,如果设计图是iPhone6的那么计算出的就是7.5rem,如果页面是iPhone5的那么计算出的结果就是6.4rem。
    2、动态设置html标签的font-size值:

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 以rem为单位的页面总宽 + 'px';

    1
      document.documentElement.style.fontSize = document.documentElement.clientWidth / 以rem为单位的页面总宽 + 'px';

    如iPhone6的设计图就是:

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

    1
      document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

    iPhone5的设计图就是:

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

    1
      document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

    3、做页面是测量设计图的px尺寸除以100得到rem尺寸。
    4、和淘宝的做法一样,文字字体大小不要使用rem换算。

    下面是这种做法的html模板:

    JavaScript

    <html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" /> <style> body{ margin: 0; padding: 0; } .box{ width: 2rem; height: 2rem; background: red; } </style> </head> <body> <div class="box"></div> <script> document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'; </script> </body> </html>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
        <style>
        body{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 2rem;
            height: 2rem;
            background: red;
        }
        </style>
    </head>
    <body>
     
        <div class="box"></div>
     
        <script>
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
        </script>
    </body>
    </html>

    由于这种做法在开发中换算rem单位的时候只需要将测量的尺寸除以100即可,所以不需要使用计算器我们就可以很快的完成计算转换,所以这也会提升开发效率,本人也比较青睐这种做法。

    另外,无论是第一种做法还是第二种做法,我们都提到了,文字字体大小是不要换算成rem做单位的,而是使用媒体查询来进行动态设置,比如下面的代码就是网易的代码:

    代码片段一:

    @media screen and (max-width: 321px) { body { font-size:16px } } @media screen and (min-width: 321px) and (max-width:400px) { body { font-size:17px } } @media screen and (min-width: 400px) { body { font-size:19px } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    @media screen and (max-width: 321px) {
        body {
            font-size:16px
        }
    }
     
    @media screen and (min-width: 321px) and (max-width:400px) {
        body {
            font-size:17px
        }
    }
     
    @media screen and (min-width: 400px) {
        body {
            font-size:19px
        }
    }

    代码片段二:

    @media screen and (max-width: 321px) { header,footer { font-size:16px } } @media screen and (min-width: 321px) and (max-width:400px) { header,footer { font-size:17px } } @media screen and (min-width: 400px) { header,footer { font-size:19px } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    @media screen and (max-width: 321px) {
        header,footer {
            font-size:16px
        }
    }
     
    @media screen and (min-width: 321px) and (max-width:400px) {
        header,footer {
            font-size:17px
        }
    }
     
    @media screen and (min-width: 400px) {
        header,footer {
            font-size:19px
        }
    }

    我们总结一下网易在文字字体大小上的做法,在媒体查询阶段,分为三个等级分别是:
    321px以下
    321px – 400px之间
    400px以上

    具体文字大小要多少个像素这个以设计图为准,但是这三个等级之间是有规律的,仔细观察发现,321px以下的屏幕字体大小比321px – 400px之间的屏幕字体大小要小一个像素,而321px – 400px之间的屏幕字体大小要比400以上屏幕字体大小要小2个像素。依照这个规律,我们根据设计图所在的像素区段先写好该区段的字体大小,然后分别写出另外两个区段的字体大小媒体查询代码就可以了。

    终于码完了这第二篇文章,无力再多说其他的话,望对大家有帮助,有些细节地方没有细说,另外作者水平有限,希望大家指正共同进步,谢谢。

    1 赞 3 收藏 评论

    图片 17

    虚假来电

    如果与HTML5 Audio一起使用,完全可以创建一个很真实的虚假”来电“,既有振动也有铃声。一旦”接听“,页面就可以播放一段音频:”喂,尽快回打给我,我的号码是“一个吸费号码”。接下来还可以使用URI自动打开拨号界面。

    图片 18

    (图2)

    你能告诉我上面说的是真实的来电吗?如果你够仔细或许会发现。但如果页面正在播放你的默认铃声,然后设备还在振动,这时你就很可能迷糊。如果和WebRTC呼叫绑定,那实际上你看到的就是一个精心构造的骗局。

    本文由金沙国际官网发布于web前端,转载请注明出处:虚假来电,小公式大乐趣

    关键词:

上一篇:没有了

下一篇:没有了