canvas创建小球随机运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面向对象小球</title>
    <style>
        #can{
          border: 1px solid #999;
        }
    </style>
</head>
<body>
    <canvas id="can" width="500px" height="500px"></canvas>
    <script>
        var c = document.querySelector('#can');
        var ctx = c.getContext('2d');
        var w = 500;
        var h = 500
 
        // 创建随机数据
        function r(num){
           return Math.random()*num
        }
        // 创建小球 
        function Ball(){
        //   this.x = r(500);  //随机x轴的值
        //   this.y = r(500);  //随机y轴的值
        this.x = r(10)+60;
        this.y = r(10)+60
          this.r = r(50)+10; //[10,100) 取10到60的数 直接让随机数0到90的结果加10
          this.color = '#'+parseInt(Math.random()*0xffffff).toString(16); // 随机颜色
          this.xSpeed = r(3)+2;  //[2,5]  随机x轴速度
          this.ySpeed = r(3)+1; // [1,4]  随机y轴速度

        }

        // 定义小球显示方法
        Ball.prototype.show = function(){
            ctx.beginPath();
            ctx.arc(this.x,this.y,this.r,0,Math.PI*2)
            ctx.fillStyle = this.color;
            ctx.fill();
            this.run(); // 创建小球之后就执行运动的方法
        }
       
        // 定义小球运动的方法--碰撞检测
        Ball.prototype.run = function(){
            if(this.x-this.r<=0 || this.x+this.r >w){
                   this.xSpeed = -this.xSpeed;
               }
            if(this.y-this.r<=0 || this.y+this.r >w){
                   this.ySpeed = -this.ySpeed;
               }
            this.x = this.x+ this.xSpeed
            this.y = this.y+ this.ySpeed
                  
        }
        // 创建一个小球的数组
        var barrArr =[];
       for (let i = 0; i < 10; i++) {
             var ball =  new Ball();  
            //  放入小球数组  以便于单个使用,设置运动
            barrArr.push(ball);
            ball.show();
            
       }
    //    小球运动
    setInterval(function(){
        ctx.clearRect(0,0,w,h);
        for (let i = 0; i < barrArr.length; i++) {
           var ball = barrArr[i];
        //    ball.run();
           ball.show();   
        }
    },10)
    </script>
</body>
</html>

在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Canvas 3D运动小球是一种使用HTML5的Canvas元素和JavaScript编程技术创建的动画效果。通过在Canvas上绘制一个球体,并通过JavaScript控制球体的位置和运动轨迹,可以实现一个具有3D效果的小球运动动画。 实现这个效果的关键是使用Canvas绘图API来绘制球体的形状和颜色,并通过JavaScript代码实时控制球体在Canvas中的位置和速度。 首先,我们可以创建一个Canvas元素,并设置其宽度和高度。接下来,使用Canvas的绘图API绘制一个圆或球体的形状,并选择一个适当的颜色进行填充。 然后,我们需要使用JavaScript来控制球体的运动。可以使用定时器函数(如setInterval)每隔一定时间间隔更新球体的位置。可以通过改变球体的坐标来移动球体,并在每次更新位置后重新绘制球体。 在移动球体的过程中,可以使用数学公式来计算球体的新位置。例如,可以使用球体的速度、加速度和时间来计算球体在每个时间间隔内的位移,并更新球体的坐标。 此外,还可以添加鼠标或键盘事件监听器,以便通过用户的交互来控制球体的运动。例如,当用户按下某个键盘按键时,可以增加球体的速度或改变其方向。 通过结合Canvas的绘图功能和JavaScript的编程能力,我们可以创建一个3D运动小球的动画效果。这种效果不仅可以增加网页的交互性和趣味性,还可以展示出CanvasJavaScript的强大功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值