canvas实现弹跳小球

最新推荐文章于 2024-05-18 21:57:13 发布

weixin_50841302

最新推荐文章于 2024-05-18 21:57:13 发布

阅读量90

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_50841302/article/details/129408729

版权

直接上代码

<!DOCTYPE html>

<html>

</head>

<body>

</canvas>

var ball={x:600,y:0,r:20,g:2,vx:-4,vy:-10,color:'pink'} //定义球的初始值g：加速度，vx:x轴方向的速度，vy:y轴方向的速度

//打开窗口后立即触发

window.οnlοad=function(){

var canvas=document.getElementById('myCanvas')

var context=canvas.getContext('2d')

setInterval(function(){

render(context)

run()

},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 run(){

ball.x+=ball.vx

ball.y+=ball.vy

ball.vy+=ball.g

//y 大于canvas画布的高度时

if(ball.y>=500-ball.r){

ball.y=500-ball.r

ball.vy=-ball.vy*0.5

if(ball.x <=0){

ball.x =600;

ball.y = 0;

}

</script>

</body>

</html>

优惠劵

weixin_50841302

关注关注

0
点赞
踩
0

收藏

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

canvas实现弹跳小球
复制链接

扫一扫

html5 canvas绘制管道里跳动小球动画特效

11-16

html5 canvas绘制管道里跳动小球动画特效

奇妙的canvas：弹跳小球

weixin_33923148的博客

11-03

269

前言关于canvas的入门知识，网上有很多成熟的资料，我就不多做介绍啦。 弹跳小球算是一个比较常见的效果，接下来就讲讲如何在canvas里实现弹跳小球吧～首先惯例先看效果图：由于视频转码问题，可能有点稍卡，但是在浏览器里看是流畅的噢(｡ì _ í｡) 1.匀减速直线运动为了方便理解之后的弹跳运动，我们先看看如何在canvas里实现匀减速直线运动。我希望达到的目的是：给小球一个初速度，...

参与评论您还未登录，请先登录后发表或查看评论

canvas制作框内跳动小球

qq_40544291的博客

12-27

438

效果如下: 思路: 1.制定画布,确定好坐标 2.绘制出圆形小球 3.给圆一个原始坐标,xy轴的速度 4.每20毫秒刷新一次,达到变化的目的 5.判断边缘全部代码及释义如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie...

canvas动画——弹跳小球

m0_67880202的博客

04-01

478

canvas动画

canvas demo-小球弹跳游戏

yz764127031的博客

02-26

860

效果 html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>engineer</title> <style type = "text/css"> div{ margin-top:30px; text-align: center;

python3.6使用tkinter实现弹跳小球游戏

12-31

本文实例为大家分享了python3.6实现弹跳小球游戏的具体代码，供大家参考，具体内容如下 import random import time from tkinter import * #下面定义一个球的类，有canvas和color两个对象 class Ball: #定义一个...

Canvas的使用样例：动画的实现，以弹跳小球为例

01-27

1，Canvas实现动画的原理（1）首先设置一个定时器，反复调用绘图函数（一般每秒30~40次）。每次调用，都会重绘整个画布。完成后的效果就像动画一样，每一帧间过渡会平滑而流畅。（2）有两种方法都可以实现重复绘制：...

canvas学习（二）：弹跳小球

08-13

NULL 博文链接：https://1017401036.iteye.com/blog/2309216

html5 canvas画布里面圆球弹跳动画效果代码

11-06

html5 canvas画布里面圆球弹跳动画效果代码 html5 canvas画布里面圆球弹跳动画效果代码

HTML5 使用canvas画布做小球回弹动画

05-14

HTML5 使用canvas画布做小球回弹动画，使绘画出来的小球沿着矩形的轨迹进行对称回弹，代码简单易懂，适合初学者练习。

ant design DatePicker日期选择框指定分钟的间隔minuteStep属性

u010234868的专栏

05-17

195

在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。

(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践

从今年开始写写博客~~

05-14

231

Vue.js的发展史（一）

2301_79683791的博客

05-15

755

Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。

setImmediate不能在浏览器中执行

Keep trying, keep going

05-14

163

的延迟时间设置为 0，但实际的延迟可能会因浏览器的最小延迟时间限制而稍有不同。函数实现类似的效果。函数不是浏览器的标准 API，而。

Vue3详细讲解

贫僧法号依平

05-15

853

Vue 3 介绍为什么要学习 vue 3Vue3 动机和新特性Vite 的使用vite介绍为什么选 Vite？Vite 的基本使用Vue3.0项目介绍vscode插件说明组合式API体验 composition APIsetup 函数reactive 函数ref 函数script setup语法(★)案例：显示鼠标案例计算属性computed函数侦听器watch函数钩子函数的使用组件通讯-父传子组件通讯-子传父依赖注入 - provide 和 inject模板中 ref 的使用vue3中废弃了过滤器。

echarts的柱状图使用

qq_45331969的博客

05-15

187

【代码】echarts的柱状图使用。

vue3专栏项目 -- 五、权限管理（下）

m0_64931189的博客

05-15

819

我们这一系列做的就是，我们刚开始做了message组件，我们可以直接在某个组件中通过即可调用这个message组件，从而展示出这个提示信息框但是我们觉得它可以像以前用过的alert一样，直接通过一个函数调用就可以展示出这个组件，所以有了如下一步步改进：

React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法

最新发布

SongZhengxing_的博客

05-18

179

子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。

canvas实现动态小球碰撞

06-07

实现动态小球碰撞需要用到Canvas的2D绘图API，具体步骤如下： 1. 创建Canvas元素和2D绘图上下文 ```html <canvas id="canvas"></canvas> ``` ```javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ``` 2. 定义小球对象 ```javascript class Ball { constructor(x, y, r, vx, vy, color) { this.x = x; // 圆心x坐标 this.y = y; // 圆心y坐标 this.r = r; // 半径 this.vx = vx; // 水平速度 this.vy = vy; // 垂直速度 this.color = color; // 颜色 } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI); ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); } } ``` 3. 创建多个小球对象，并绘制到Canvas上 ```javascript const balls = []; // 存储小球对象的数组 const colors = ['#ff0000', '#00ff00', '#0000ff']; // 小球颜色 for (let i = 0; i < 3; i++) { const ball = new Ball( Math.random() * canvas.width, // 随机x坐标 Math.random() * canvas.height, // 随机y坐标 20, // 半径 Math.random() * 4 - 2, // 随机水平速度 Math.random() * 4 - 2, // 随机垂直速度 colors[i] // 随机颜色 ); balls.push(ball); } function drawBalls() { balls.forEach(ball => ball.draw()); } drawBalls(); ``` 4. 实现小球碰撞 ```javascript function updateBalls() { balls.forEach(ball => { ball.x += ball.vx; ball.y += ball.vy; // 碰到边界反弹 if (ball.x < ball.r || ball.x > canvas.width - ball.r) { ball.vx = -ball.vx; } if (ball.y < ball.r || ball.y > canvas.height - ball.r) { ball.vy = -ball.vy; } // 碰撞检测 balls.forEach(otherBall => { if (ball !== otherBall) { const dx = ball.x - otherBall.x; const dy = ball.y - otherBall.y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < ball.r + otherBall.r) { // 碰撞 const angle = Math.atan2(dy, dx); const sin = Math.sin(angle); const cos = Math.cos(angle); // 旋转坐标系 const x1 = 0; const y1 = 0; const x2 = dx * cos + dy * sin; const y2 = dy * cos - dx * sin; // 旋转速度向量 const vx1 = ball.vx * cos + ball.vy * sin; const vy1 = ball.vy * cos - ball.vx * sin; const vx2 = otherBall.vx * cos + otherBall.vy * sin; const vy2 = otherBall.vy * cos - otherBall.vx * sin; // 碰撞后的速度向量 const vx1Final = ((ball.r - otherBall.r) * vx1 + 2 * otherBall.r * vx2) / (ball.r + otherBall.r); const vx2Final = ((otherBall.r - ball.r) * vx2 + 2 * ball.r * vx1) / (ball.r + otherBall.r); const vy1Final = vy1; const vy2Final = vy2; // 旋转回原坐标系 const x1Final = x1 * cos - y1 * sin; const y1Final = y1 * cos + x1 * sin; const x2Final = x2 * cos - y2 * sin; const y2Final = y2 * cos + x2 * sin; // 更新位置和速度向量 ball.x = ball.x + (x1Final - x1); ball.y = ball.y + (y1Final - y1); ball.vx = vx1Final * cos - vy1Final * sin; ball.vy = vy1Final * cos + vx1Final * sin; otherBall.x = ball.x + (x2Final - x1); otherBall.y = ball.y + (y2Final - y1); otherBall.vx = vx2Final * cos - vy2Final * sin; otherBall.vy = vy2Final * cos + vx2Final * sin; } } }); }); } ``` 5. 清空Canvas并更新小球位置 ```javascript function clearCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); } function loop() { clearCanvas(); updateBalls(); drawBalls(); requestAnimationFrame(loop); } loop(); ``` 完整代码如下： ```html <canvas id="canvas"></canvas> ``` ```javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); class Ball { constructor(x, y, r, vx, vy, color) { this.x = x; // 圆心x坐标 this.y = y; // 圆心y坐标 this.r = r; // 半径 this.vx = vx; // 水平速度 this.vy = vy; // 垂直速度 this.color = color; // 颜色 } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI); ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); } } const balls = []; // 存储小球对象的数组 const colors = ['#ff0000', '#00ff00', '#0000ff']; // 小球颜色 for (let i = 0; i < 3; i++) { const ball = new Ball( Math.random() * canvas.width, // 随机x坐标 Math.random() * canvas.height, // 随机y坐标 20, // 半径 Math.random() * 4 - 2, // 随机水平速度 Math.random() * 4 - 2, // 随机垂直速度 colors[i] // 随机颜色 ); balls.push(ball); } function drawBalls() { balls.forEach(ball => ball.draw()); } function updateBalls() { balls.forEach(ball => { ball.x += ball.vx; ball.y += ball.vy; // 碰到边界反弹 if (ball.x < ball.r || ball.x > canvas.width - ball.r) { ball.vx = -ball.vx; } if (ball.y < ball.r || ball.y > canvas.height - ball.r) { ball.vy = -ball.vy; } // 碰撞检测 balls.forEach(otherBall => { if (ball !== otherBall) { const dx = ball.x - otherBall.x; const dy = ball.y - otherBall.y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < ball.r + otherBall.r) { // 碰撞 const angle = Math.atan2(dy, dx); const sin = Math.sin(angle); const cos = Math.cos(angle); // 旋转坐标系 const x1 = 0; const y1 = 0; const x2 = dx * cos + dy * sin; const y2 = dy * cos - dx * sin; // 旋转速度向量 const vx1 = ball.vx * cos + ball.vy * sin; const vy1 = ball.vy * cos - ball.vx * sin; const vx2 = otherBall.vx * cos + otherBall.vy * sin; const vy2 = otherBall.vy * cos - otherBall.vx * sin; // 碰撞后的速度向量 const vx1Final = ((ball.r - otherBall.r) * vx1 + 2 * otherBall.r * vx2) / (ball.r + otherBall.r); const vx2Final = ((otherBall.r - ball.r) * vx2 + 2 * ball.r * vx1) / (ball.r + otherBall.r); const vy1Final = vy1; const vy2Final = vy2; // 旋转回原坐标系 const x1Final = x1 * cos - y1 * sin; const y1Final = y1 * cos + x1 * sin; const x2Final = x2 * cos - y2 * sin; const y2Final = y2 * cos + x2 * sin; // 更新位置和速度向量 ball.x = ball.x + (x1Final - x1); ball.y = ball.y + (y1Final - y1); ball.vx = vx1Final * cos - vy1Final * sin; ball.vy = vy1Final * cos + vx1Final * sin; otherBall.x = ball.x + (x2Final - x1); otherBall.y = ball.y + (y2Final - y1); otherBall.vx = vx2Final * cos - vy2Final * sin; otherBall.vy = vy2Final * cos + vx2Final * sin; } } }); }); } function clearCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); } function loop() { clearCanvas(); updateBalls(); drawBalls(); requestAnimationFrame(loop); } loop(); ```

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交