使用Canvas画一个弹跳的皮球

来源：互联网发布：淘宝秒杀网页编辑：程序博客网时间：2024/04/29 14:39
<!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>
阅读全文
0 0