当前位置:

html5 canvas 实现海水慢慢上升效果

本文最后更新于2015-04-10,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!

温馨提示:本文共1725个字,读完预计5分钟。

今天没事做了一个海水慢慢上升的效果,用到了html5中的canvas和原生js。

修改了遮罩图片的路径,之前的路径不对,导致没有效果。。

主要代码部分:

HTML:

1
2
3
4
5
6
7
8
9
10
11
<!-- loading -->
<!--<div id="loading">
  <div class="round-trip"></div>
  <div class="open-jaw"></div>
  <div class="one-way"></div>
</div>-->
 
<!-- canvas -->
<section class="page">
   <canvas id="demo" width="176" height="83">您的浏览器不支持canvas!</canvas>
</section>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*reset*/
html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;background-color:#222;}
canvas,section{display:block;}
 
/*loading*/
/*#loading{width:100%;height:100%;position:absolute;top:0;left:0;z-index:9999;background-color:#333333;}
#loading div {width: 30px;height: 30px;position: absolute;top: 45%;border-radius: 50%; }
.round-trip {background-color: #87CDCD;-webkit-animation: move 2s infinite cubic-bezier(.2,.64,.81,.23);}
.open-jaw {background-color: #FF9D84;-webkit-animation: move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23);}
.one-way {background-color: #F0E797;-webkit-animation: move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23);}
@-webkit-keyframes move { 0% {left: 0%;} 100% {left:100%;} }*/
 
/*main*/
.page{width:100%;height:100%;background:url('http://www.17sucai.com/preview/308815/2015-04-07/www.qxllq_.com_/style/images/wallpaper1_aacd261.jpg') no-repeat center center;background-size:cover;}
#demo{position:absolute;top:40%;left:50%;margin-left:-88px;}

JS:

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
function init(){
  img = new Image();
  img.onload = function (){
    ctx.drawImage(img,0,0,w,h); //在画布上绘制图像
    clearTimeout(st);
    st = setTimeout(function(){
      y = h;
      img2 = new Image();
      img2.onload = function(){
        clearInterval(sl);
            sl = setInterval(function(){
              y--;
              if(y>=-5){
                ctx.globalCompositeOperation="source-atop"; //重要:在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
                ctx.drawImage(img2,0,y,w,h);
                if(y==-5){
                  init(); //执行完毕,循环执行
                }
              }
            },30);
      }
      img2.src = "http://www.hehaibao.com/wp-content/themes/H-Bao/images/sea.jpg"; //遮罩图片
    },10);
  }
    img.src = "http://www.17sucai.com/preview/308815/2015-04-07/www.qxllq_.com_/style/images/logo-text_0f1b4c4.png"; //原始图片
}
 
//window.onload = function (){ document.getElementById('loading').style.display = 'none'; }
init();

至此,本篇完~ 谢谢!

版权申明:本文地址 ,本博客所有文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!

我要说两句