文章标题

最新推荐文章于 2023-10-19 15:03:50 发布

MandyMinL

最新推荐文章于 2023-10-19 15:03:50 发布

阅读量212

点赞数

分类专栏： HTML5 canvas 文章标签： canvas

本文链接：https://blog.csdn.net/sinat_36581022/article/details/53020575

版权

HTML5 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

canvas

4 篇文章 0 订阅

订阅专栏

利用canvas制作运动小球

这里写代码片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小球动起来</title>
</head>
<body>
<canvas id="canvas" style="display: block;border: 1px solid aquamarine;margin: 50px auto;"></canvas>
<script>

    var ball={x:512,y:100,r:20,g:2,vx:-4,vy:-10,color:"#ff00ff"};  //g -加速度越小越慢 //vx-vy-在X.Y轴上的速度 vx-4向左边以抛物线运动//vy-10 上抛

    var canvas;
    window.onload=function () {
        canvas=document.getElementById("canvas");
        canvas.width="1024";
        canvas.height="768";

        var context=canvas.getContext("2d");
        setInterval(function () {
            render(context);  //render就是渲染的意思。
            update();

        },50)


    };

    function update() {    //对小球运动控制
        ball.x+=ball.vx;
        ball.y+=ball.vy;
        ball.vy+=ball.g;  //  +重力加速度

        if (ball.y>=768-ball.r){   //碰撞检测
            ball.y=768-ball.r;  //第一个位置
//            ball.vy=-ball.vy;  //=相反的速度 回到原来的高度  /下边缘
            ball.vy=-ball.vy*0.5;  //每次损失0.5

        }

    }

    function render(cxt) {

        cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);

        cxt.fillStyle=ball.color;
        cxt.beginPath();
        cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI);
        cxt.closePath();
        cxt.fill();




    }
</script>

</body>
</html>