canvas小练习

最新推荐文章于 2022-03-12 11:40:52 发布

weixin_30341735

最新推荐文章于 2022-03-12 11:40:52 发布

阅读量52

点赞数

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

版权

以一个小球来回顾一下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>

转载于:https://www.cnblogs.com/violinxliu/p/3832590.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30341735

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas小练习

以一个小球来回顾一下canvas的小知识吧，因为也有一段时间没怎么接触这玩意了。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>来回跑动的小球</title></head><bo...
复制链接

扫一扫