使用Canvas画一个弹跳的皮球

最新推荐文章于 2023-04-01 23:44:04 发布

原创最新推荐文章于 2023-04-01 23:44:04 发布 · 508 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用HTML5 Canvas实现的简单动画案例，通过JavaScript控制圆形在画布上上下移动，并在背景画布上加载图片。文章展示了如何利用Canvas API进行绘图、清除和更新画布内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #bgCanvas{
            position: absolute;
            top: 50px;
            left: 20px;
            z-index: 2;
        }
        #bgCanvas{
            position: absolute;
            top: 50px;
            left: 20px;
            z-index: 3;
        }
    </style>
</head>
<body>

<input type="button" value="开始" onclick="beginAni();">
<input type="button" value="结束" onclick="stopAni();">

<canvas id="myCanvas" width="1024" height="485"></canvas>
<canvas id="bgCanvas" width="400" height="500"></canvas>


<script>
    var bgCanvas = document.getElementById("bgCanvas");//获取画布对象
    var bgCtx = bgCanvas.getContext("2d")//拿到上下文对象
    var image01 = new Image();
    image01.src = "1.jpg";
    image01.onload = function () {
        bgCtx.drawImage(image01,0,0); //异步加载
    }

    var myCanvas = document.getElementById("myCanvas");//获取画布对象
    var ctx = myCanvas.getContext("2d")//拿到上下文对象
    //不变的元素
   var circle_x = 100;
   var circle_r = 50;

   //变化的元素
    var circle_y = 0;
    var offset = 1;

    var intervalFlg = 0;
    var flg = -1;
    function clearAndRedraw() {
        ctx.clearRect(0,0,myCanvas.width,myCanvas.height);
        ctx.beginPath();
        ctx.arc(circle_x,circle_y,circle_r,0,Math.PI*2,false);
        ctx.strokeStyle = "red";
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.stroke();
        ctx.closePath();

        if ((flg == -1 && circle_y<=myCanvas.height) || circle_y <= 0){
            circle_y+=offset;
            flg = -1;
        }
        if (circle_y == myCanvas.height || flg == 1){
            circle_y-=offset;
            flg = 1;
        }

    }
    function  beginAni() {
        if(intervalFlg == 0){
            intervalFlg = setInterval(clearAndRedraw,5);//周期性调用
        }

    }
    function stopAni() {
        if(intervalFlg != 0){
            clearInterval(intervalFlg);
            intervalFlg = 0;
        }
    }
</script>

</body>
</html>