使用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 条评论
登录 后参与评论

相关文章

来自专栏烙馅饼喽的技术分享

Silverlight像素着色器文字描边效果-改

        上次的描边着色器有两个问题,导致效果不太理想。现在我们来设法改进这两点。 问题一: 当TextBlock的呈现宽度和高度没有正确赋值时,将无法...

3015
来自专栏WebDeveloper

如何让超出块级元素的内容使用省略号代替?

1186
来自专栏前端知识分享

第100天:CSS3中animation动画详解

CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation;

1492
来自专栏Android知识点总结

Android关于Path你所知道的和不知道的一切

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

文本

font-size 文字大小 font-weight 文字加粗(bold加粗/normal正常) font-style 文字倾斜(italic倾斜/norm...

973
来自专栏糊一笑

深入常用CSS声明(一) —— Background

一直对一些自己常用的css声明掌握得不是很全,只知道常用的一些属性和值,但是对于其他的用法确实一知半解,这篇文章旨在扫盲,先不说有多深的理解,至少做到能够看到这...

3865
来自专栏Keegan小钢

Android样式的开发:shape篇

一个应用,应该保持一套统一的样式,包括Button、EditText、ProgressBar、Toast、Checkbox等各种控件的样式,还包括控件间隔、文字...

972
来自专栏数据小魔方

sparklines迷你图系列14——Correlation(HeatMap)

今天跟大家分享的是sparklines迷你图系列13——Correlation(HeatMap)。 热力图在excel中可以轻松的通过自带的条件格式配合单元格数...

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

从零开始学 Web 之 CSS3(五)transform

transform 字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:移动 translate,缩放scale,旋转rotate,翻转...

1112
来自专栏柠檬先生

css3 UI 修饰——回顾

1.box-shadow 属性向框添加一个或者多个阴影。   语法: box-shadow: h-shadow v-shadow blur spread col...

1989

扫码关注云+社区