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

星期五

明天不上班

 
 
 

日志

 
 
关于我

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

网易考拉推荐

HTML5 Canvas 简单动画练习 sin曲线  

2011-04-09 11:25:32|  分类: Html5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

运动中的sin曲线

  HTML5 Canvas 简单动画练习 sin曲线 - zhenghaoju700 - zhenghaoju700 的博客

CODE

<!DOCTYPE HTML>
<html>
<head>
    <title>Html5 Canvas Animations 2</title>
</head>
<body onload="init();" >
<canvas id="c" width="1200" height="960"></canvas>
<script type="text/javascript">
    var speed = 30;
    var x = 10;
    var dx = 6;
    var ctx;

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

    function draw(){
        if(x>960){
           x = 10;
           ctx.beginPath();
        }
        ctx.clearRect(0,0,1200,960);
        
        ctx.lineWidth = "4";
        ctx.lineJoin = "round";
        ctx.strokeStyle = '#CCC';

        for(var i=0;i<=100;i=i+10){
            ctx.moveTo(x-dx,50*Math.sin(Math.PI*(x-dx)/90)+200+i*3);
            ctx.lineTo(x,50*Math.sin(Math.PI*x/90)+200+i*3);
            ctx.stroke();
        }
        x += dx;
    }
</script>
</body>
</html>

 

演示页面下载地址 http://download.csdn.net/user/hurry70

这是一个HTML5 Canvas 动画简单实现。

参考资料

https://developer.mozilla.org/cn/Canvas_tutorial/Basic_animations

 

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

历史上的今天

评论

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

页脚

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