canvas-小球碰壁折返

分析:获取clientWidth 、clientHeight，当超出高和宽让其随机累加折返…

<!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>html,body {margin: 0;padding: 0;}body {box-sizing: border-box;}canvas {display: block;/* margin: 25px; */border: 1px solid red;margin: 5px auto 5px;background-color: skyblue;}</style>
</head><body><canvas id="myCanvas"></canvas><script>let canvas = document.getElementById("myCanvas");let ctx = canvas.getContext("2d");let ballArr = [];canvas.width = document.documentElement.clientWidth - 30;canvas.height = document.documentElement.clientHeight - 30;function Ball() {this.x = parseInt(Math.random() * canvas.width);this.y = parseInt(Math.random() * canvas.height);this.r = 10;this.color = "red";this.dx = parseInt(Math.random() * 10) - 5;this.dy = parseInt(Math.random() * 10) - 5;ballArr.push(this)}Ball.prototype.update = function() {this.x += this.dx;this.y += this.dy;if (this.x < 0 || this.x > canvas.width) {this.dx = -this.dx;}if (this.y < 0 || this.y > canvas.height) {this.dy = -this.dy}}Ball.prototype.render = function() {ctx.beginPath();ctx.globalAlpha = 1;ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);ctx.fillStyle = this.color;ctx.fill()}for (let i = 0; i < 1000; i++) {new Ball();}setInterval(function() {ctx.clearRect(0, 0, canvas.width, canvas.height);for (let i = 0; i < ballArr.length; i++) {ballArr[i].render();ballArr[i].update();}}, 20)</script>
</body></html>

canvas-小球碰壁折返相关推荐

小球碰壁反弹加分_Javascript：Canvas的小球碰壁反弹
(萌新),我今天在网上看了看如何在Canvas画布上做出小球碰壁反弹的效果,然后自己试做一下,感觉良好,不知道还有什么需要改良. 首先我的思路是: 1.在body创建一个canvas标签,设置宽:50 ...
小球碰壁反弹加分_canvas实现碰壁反弹（小球）
Document canvas { box-shadow: 0 0 5px red; display: block; margin: 20px auto; } var cv = document.qu ...
小球碰壁反弹加分_用Java实现小球碰壁反弹的简单实例(算法十分简单)
用Java实现小球碰壁反弹的简单实例(算法十分简单) 核心代码如下: if(addX){ x+=3; }else{ x-=3; } if(addY){ y+=6; }else{ y-=6; } if( ...
js运动小球碰壁反弹
js运动小球碰壁反弹 1.触碰窗口壁沿反弹,同时改变颜色 <!DOCTYPE html> <html lang="en"><head><m ...
js 小球碰壁反弹and小球碰撞
好像好几天没有更博了呢,最近有点变懒了,这样不好,不好~~我们要做热爱学习的好孩子,嘻嘻,今天下午补上... 我们在学习js的时候,一个很经典的案例就是小球的碰壁反弹效果啦~简单的小球碰壁效果可以慢慢 ...
canvas小球连线碰撞效果 html+css+js
先看效果(完整代码在底部): canvas小球连线碰撞完整源代码 html+css+js 这是我的B站地址~热烈欢迎实现(看注释,可一步一步跟着实现): 0:定义标签: <h1>北极光之 ...
java实现多个小球碰壁变色_java小程序（小球碰壁）
模拟一个小球碰壁后,沿光的反射方向运动的动画. package mypro01; import java.awt.*; class Main { public static void main(Str ...
vue+canvas 小球连线——碰壁折返
学习案例,记录一下 <template><div><canvas ref="myCanvas" width="800" heigh ...
canvas -小球自由落体运动
最近学习canvas,就使用canvas写一个小球,再有重力作用下的落体运动 html: <canvas id="canvas" width="600" ...

canvas-小球碰壁折返

分析:获取clientWidth 、clientHeight，当超出高和宽让其随机累加折返…

canvas-小球碰壁折返相关推荐

最新文章

热门文章