canvas抛物线运动demo

最新推荐文章于 2023-09-03 22:35:29 发布

weixin_30619101

最新推荐文章于 2023-09-03 22:35:29 发布

阅读量280

点赞数

文章标签： c#

原文链接：http://www.cnblogs.com/dongxiaolei/p/6952855.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas" style="display:block;border:1px solid #ccc;margin:20px auto"></canvas>
</body>
<script>
    var ball={x:512,y:100,r:20,g:2,vx:-4,vy:0,color:"#005588"};//x,y表示坐标   半径r  加速度g 速度vx 速度vy也就是y方向的速度
    window.onload=function(){
        var canvas=document.getElementById("canvas");
        canvas.width=1024;
        canvas.height=768;
        var context=canvas.getContext("2d");
        setInterval(
                function(){
                    render(context);
                    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*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>
</html>

转载于:https://www.cnblogs.com/dongxiaolei/p/6952855.html

weixin_30619101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas抛物线运动demo

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><canvas id="canvas" style="display:blo...
复制链接

扫一扫