canvas实现跳动的小球

最新推荐文章于 2022-08-04 11:40:09 发布

Dj_Fairy

最新推荐文章于 2022-08-04 11:40:09 发布

阅读量1.2k

点赞数 1

分类专栏：前端 canvas 文章标签： canvas

本文链接：https://blog.csdn.net/Dj_Fairy/article/details/83790257

版权

前端同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

canvas

3 篇文章 0 订阅

订阅专栏

canvas实现主要代码

canvas(centerx,centery,radius,startingAngle,endingAngle,antclockwise=false)

canvas(x轴坐标，y轴坐标，角度，开始的角度，结束的角度，顺时针（默认false）/逆时针true)

角度从0开始，一整个圆结束是2PI

demo代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>跳动的小球</title>
</head>
<body>
<canvas id="canvas" style="display:block;margin: 0 auto;border: 1px solid black">
    当前浏览器不支持canvas，请更换浏览器再试
</canvas>
<script>
    var ball={x:712,y:100,r:20,g:2,vx:-4,vy:-10,color:'red'} //定义球的初始值g：加速度，vx:x轴方向的速度，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 render(cxt){
        cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height)
        cxt.beginPath()
        cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI)
        cxt.fillStyle=ball.color
        cxt.fill()   //填充
    }
    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  //到达底部弹起来，*0.5有个缓冲的效果
        }
    }

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

Dj_Fairy

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
canvas实现跳动的小球

canvas实现主要代码canvas(centerx,centery,radius,startingAngle,endingAngle,antclockwise=false)canvas(x轴坐标，y轴坐标，角度，开始的角度，结束的角度，顺时针（默认false）/逆时针true)角度从0开始，一整个圆结束是2PIdemo代码&lt;!DOCTYPE html&gt;&lt;...
复制链接

扫一扫

专栏目录