基本信息
源码名称：无规则运动的小球(canvas)
源码大小：1.59KB
文件格式：.html
开发语言：js
更新时间：2018-07-25
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：78630559

本次赞助数额为： 2 元　
   源码介绍

canvas创建一个小球，小球在指定范围内进行无规则运动 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>自动运动小球</title>
    <style type="text/css">
        canvas{
            background: yellow;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<canvas id="mycanvas" width="500" height="400"></canvas>
<script type="text/javascript">
    var mycanvas = document.getElementById("mycanvas");
    var canca = mycanvas.getContext("2d");
    //画小球
    var ballx = 72;
    var bally = 33;
    function ball(x,y){
        canca.fillStyle = "#D46418"
        canca.beginPath();
        canca.arc(x,y,20,0,2*Math.PI);
        canca.fill();
    }
    ball(ballx,bally);

    //自动移动
    var bxfx = true;//x正方向为真
    var byfx = true;//y正方向为真
    var ballSpeed = 1;//初始速度(随机)
    function moveball(){
        if (bxfx) {
            ballx  = ballSpeed;
            if (ballx>=480) {
                bxfx = false;

            }
        } else{
            ballx -= ballSpeed;
            if (ballx<=20) {
                bxfx = true;

            }
        }
        if (ballx>=480) {
            ballx -= ballSpeed;
        }

        if (byfx) {
            bally  = ballSpeed;
            if (bally>=380) {
                byfx = false;
            }
        } else{
            bally -= ballSpeed;
            if (bally<=20) {
                byfx = true;
            }
        }
        canca.clearRect(0,0,500,500);
        ball(ballx,bally);
    }
    window.setInterval("moveball()",10);


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