首页 > 其他 > 详细

canvas小练习

时间:2014-07-09 13:26:40      阅读:371      评论:0      收藏:0      [点我收藏+]

以一个小球来回顾一下canvas的小知识吧,因为也有一段时间没怎么接触这玩意了。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>来回跑动的小球</title>
</head>
<body>
    <div style="width:500px; height:500px; background:#CCC">
        <canvas id=‘canvas‘ width="500" height="500"></canvas>        
    </div>
    <script>
    var x = 0,y = 0;    
    function init() {
        var context = document.getElementById(canvas);
        var ctx = context.getContext("2d");//获取上下文内容
        ctx.clearRect(0, 0, 500, 500);//参数分别为x,y,宽度,高度 
        ctx.beginPath();//绘制开始
        ctx.fillStyle  = #169008;
        ctx.arc(x++,y++,5,0,Math.PI*2,true);
        ctx.fill();//填充颜色
        ctx.closePath();//结束绘画
    }
    window.onload  = function(){
        setInterval(function(){
            init()
            if(x >= 500){ x = 0, y = 0;}
        },10)
    }
    </script>
</body>
</html>

 

canvas小练习,布布扣,bubuko.com

canvas小练习

原文:http://www.cnblogs.com/violinxliu/p/3832590.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!