canvas小球运动的例子

小灰灰 2022-03-17 05:08 262阅读 0赞

这是慕课网用canvas写的一个比较简单的2d小球运动的例子

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <canvas id="canvas" style="display:block;margin:50px auto;"></canvas>
        <script>
            var ball = {x:512,y:100,r:20,g:2,vx:-4,vy:0,color:"#005588"};
            window.onload =function(){
                var canvas = document.getElementById('canvas');
                //使用2d画图
                var context = canvas.getContext('2d');
                canvas.width = 1024;
                canvas.height = 768;
                setInterval(
                    function () {
                        render(context);
                        update();
                    },
                    50
                );
            }
    
            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();
                cxt.stroke();
            }
    
            function update() {
                ball.x += ball.vx;
                ball.y += ball.vy;
                ball.vy += ball.g;//y轴方向有重力加速度
                if(ball.y >= 768-ball.r){//当小球掉到地面了，反弹
                    ball.y = 768-ball.r;
                    ball.vy = -ball.vy*0.5;//添加点摩擦力
                }
            }
        </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，262人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现小球随机运动

效果图： ![在这里插入图片描述][20190929000852158.gif] HTML <div class='box'> <div cla

爱被打了一巴掌/ 2023年08月17日 16:31/ 0 赞/ 124 阅读

相关 canvas重力小球 html+css+js

先看效果（完整代码在底部）：因为录屏软件的原因，动画看着有点迟钝，其实是动画很顺畅的~ https://space.bilibili.com/176586698

墨蓝/ 2022年11月17日 14:52/ 0 赞/ 180 阅读

相关 canvas绘制七彩随机小球！

canvas绘制七彩随机小球 1、题目 > 拿到一个案例，需要在画布上实现不同大小颜色位置的七彩小球，并且要运动起来！ 2、思路 > （1）、第一步需要在页

柔光的暖阳◎/ 2022年10月15日 04:00/ 0 赞/ 201 阅读

相关 canvas标签实现动态小球

Html5 canvas标签实现动态小球话不多说，直接上代码 <canvas id="mycanvas" width="500" height="500" st

曾经终败给现在/ 2022年07月14日 05:50/ 0 赞/ 229 阅读

相关小球运动

> 两个小球运动,如果把他们的速度,方向都设置成一样的话,需要给两个小球不同的起始位置,否则两个会重合,只能看到一个 > 如果只是仅仅给大小改变的话,两个小球运动的轨迹是一

蔚落/ 2022年06月05日 08:19/ 0 赞/ 268 阅读

相关 canvas小球运动的例子

这是慕课网用canvas写的一个比较简单的2d小球运动的例子 <!DOCTYPE html> <html lang="en"> <head>

小灰灰/ 2022年03月17日 05:08/ 0 赞/ 263 阅读

相关 canvas画小球，头像，文本

/ 画小球 / drawArc: function(ctx, color, w, h) {

深碍√TFBOYSˉ_/ 2021年12月16日 21:25/ 0 赞/ 269 阅读

相关 canvas的运用,面向对象的思想(小球运动)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

悠悠/ 2021年09月15日 08:40/ 0 赞/ 364 阅读

相关绘制canvas彩色泡泡小球碰撞

globalCompositeOperation带来的不一样的烟花 ![20170224163016894][] 一.知识点 1.动画： setInterval(

墨蓝/ 2021年09月11日 07:54/ 0 赞/ 427 阅读

相关 js运动小球碰壁反弹

js运动小球碰壁反弹 1、触碰窗口壁沿反弹，同时改变颜色 <!DOCTYPE html> <html lang="en"> <head

约定不等于承诺〃/ 2021年07月25日 12:51/ 0 赞/ 436 阅读