注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

Html5 Canvas (7)动画  

2011-04-03 00:32:32|  分类: Html5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

基本动画的步骤 Basic animation steps

画一帧,你需要以下一些步骤:

  1. 清空 canvas
    除非接下来要画的内容会完全充满 canvas (例如背景图),否则你需要清空所有。最简单的做法就是用 clearRect 方法。
  2. 保存 canvas 状态
    如果你要改变一些会改变 canvas 状态的设置(样式,变形之类的),又要在每画一帧之时都是原始状态的话,你需要先保存一下。
  3. 绘制动画图形(animated shapes)
    这一步才是重绘动画帧。
  4. 恢复 canvas 状态
    如果已经保存了 canvas 的状态,可以先恢复它,然后重绘下一帧。

操控动画 Controlling an animation

我们需要一些可以定时的执行重绘的方法。有两种方法可以实现这样的动画操控。首先可以通过 setInterval 和 setTimeout 方法来控制在设定的时间点上执行重绘。

1setInterval(animateShape,500);
2setTimeout(animateShape,500);

 

一个实例 图片滚动显示的效果

<!DOCTYPE HTML>
<html>
<head>
    <title>Html5 Canvas Animations</title>
</head>
<body onload="init();" >
<canvas id="c" width="800" height="200"></canvas>
<script type="text/javascript">
    var img = new Image();
    img.src = 'images/pic.jpg';
    var canvasXSize = 800;
    var canvasYSize = 200;
    var speed = 5;
    var scale = 1.05;
    var y = -4.5;

    var dx = 0.75;
    var imgW = img.width*scale;
    var imgH = img.height*scale;
    
    var x = 0;
    if(imgW > canvasXSize){ x = canvasXSize - imgW; }
    
    var clearX;
    var clearY;
    if(imgW > canvasXSize){ clearX = imgW; }else{ clearX = canvasXSize; }
    if(imgH > canvasYSize){ clearY = imgH; }else{ clearY = canvasYSize; }
    var ctx;

    function init(){
        ctx = document.getElementById('c').getContext('2d');
        return setInterval(draw,speed);
    }

    function draw(){
        ctx.clearRect(0,0,clearX,clearY);

        if(imgW <= canvasXSize){
            if(x > canvasXSize){ x = 0; }
            if(x > (canvasXSize-imgW)){
                ctx.drawImage(img,x-canvasXSize+1,y,imgW,imgH);
            }
        }else {
            if (x > (canvasXSize)) { x = canvasXSize-imgW; }
            if (x > (canvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }
        }
        
        ctx.drawImage(img,x,y,imgW,imgH);
       
        x += dx;

    }
</script>
</body>
</html>

 

本系列所有的DEMO下载地址  http://download.csdn.net/source/3154714



所有参考资料

MDC Doc Center https://developer.mozilla.org/cn/Canvas_tutorial

Canvas 2D API Specification 1.0  http://dev.w3.org/html5/canvas-api/canvas-2d-api.html

W3School HTML5 Canvas 标签 http://www.w3school.com.cn/html5/html5_canvas.asp

《HTML5 揭秘》 第四章 Canvas绘图

 

 

动画补充

建议使用FireFox4访问   一些HTML5动画 http://kalogen.iteye.com/blog/700816


  评论这张
 
阅读(425)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017