使用canvas实现一个圆球的触壁反弹

HTML

<canvas id="canvas" width="500" height="500" style="border: 1px solid #FF0000;"></canvas>

JS

1.获取上下文

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

2.实现一个球类

 1     class circle {
 2         constructor() {
 3             this.x = 25,
 4             this.y = 25,
 5             this.mx = Math.random()*5,
 6             this.my = Math.random()*3,
 7             this.radius = 25,
 8             this.color = 'blue',
 9             this.draw = function () {
10                 ctx.beginPath();
11                 ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
12                 ctx.fillStyle = this.color;
13                 ctx.fill();
14             }
15         }
16 
17     };

3.new一个球

let ball = new circle();

4.实现动画函数

    const move = (function () {
        // 清除画布
        ctx.clearRect(0,0, canvas.width, canvas.height);
        
        // 重新绘制圆
        ball.draw();
        
        // 移动圆
        ball.x += ball.mx; // x坐标递增
        ball.y += ball.my; // y坐标递增
        
        // x轴坐标加移动的距离大于画布宽度(到达右边界) 或 x轴坐标加移动的距离等于0(到达左边界) 
        if (ball.x + ball.mx > canvas.width || ball.x + ball.mx < 0) {
            ball.mx = -ball.mx; // x轴坐标递减
        };
        // y轴坐标加移动的距离大于画布宽度(到达下边界) 或 y轴坐标加移动的距离等于0(到达上边界) 
        if (ball.y + ball.my > canvas.height || ball.y + ball.my < 0) {
            ball.my = -ball.my; // y轴坐标递减
        };
        
        // 递归调用当前方法
        window.requestAnimationFrame(arguments.callee);
    })();

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏天天

childNodes属性和nodeType属性

864
来自专栏河湾欢儿的专栏

css3线性、径向渐变

背景线性渐变 background: linear-gradient(); 第一个参数: (角度 或者是一个线性的方向)可选的 默认的是(to botto...

613
来自专栏微服务

jQuery选择器大全(48个代码片段+21幅图演示)

选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就...

3378
来自专栏前端萌媛的成长之路

CSS盒子模型

1593
来自专栏进击的君君的前端之路

CSS理解之z-index

1524
来自专栏Golang语言社区

【Go 语言社区】 H5 APP 前端开发专业的 HTML 5 Canvas

什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,您可以控制其每一像素。 canva...

2686
来自专栏Nian糕的私人厨房

jQuery 常用方法

jQuery 是一个快速、简洁的 JavaScript 框架,封装 JavaScript 常用的功能代码,提供一种简便的 JavaScript 设计模式,优化 ...

845
来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(二)获取和操作元素的属性

DOM中有很多方式获取元素,比如通过id,通过标签名,通过类名,通过name的值,通过选择器等方式。

1054
来自专栏一直在跳坑然后爬坑

Flutter常用widget 'Row、Column'

用于水平显示子项 A widget that displays its children in a horizontal array. 注:这个控件本身不可...

792
来自专栏一“技”之长

iOS(CGGeometry)几何类方法总结 原

CGPoint CGPointMake(CGFloat x, CGFloat y);

862

扫码关注云+社区