客气了
好的。
<style>
#papa { left: -214px;width: 1024px; height: 640px; background: rgba(0,0,0,.4);url('https://pic.imgdb.cn/item/62e34d01f54cd3f9376dfee4.jpg'); position: relative; }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: relative; left: 10px; top: 10px; padding: 10px; width: fit-content; font: normal 1em sans-serif; color: snow; background: rgba(255,255,255,.25); backdrop-filter: blur(2px); border-radius: 8px; overflow: hidden; box-shadow: 1px 2px 2px #000; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
#mama { position: absolute; width: 400px; height: 400px; left: calc(50% - 200px); top: calc(50% - 200px); border: 1px solid pink; }
#canv { position: absolute; }
</style>
<div id="papa">
<div id="mama"><canvas id="canv"></canvas></div>
</div>
<script>
let width = canv.width = mama.offsetWidth, height = canv.height = mama.offsetHeight;
let ctx = canv.getContext('2d');
let ballAr = new Array(20);
wrapper.onclick = () => {
let num = (min, max) => {
let number = Math.floor(Math.random() * (max-min+1)) + min;
if(number == 0) number = 1;
return number;
}
for(let j = 0; j < ballAr.length; j++) { //实例化对象
let item = new Ball(
num(20, width - 20), // x 坐标
num(20, height - 20), // y 坐标
num(5,10), // r 半径
0.5 * num(-2, 2), // vx 偏移量
0.5 * num(-2,2), // vy 偏移量
`rgba(${num(0,255)}, ${num(0,255)}, ${num(0,255)}, 075)` //color 颜色
);
ballAr = item;
}
//绘制对象
function Ball(x, y, r, vx, vy, color) {
this.x = x;
this.y = y;
this.r = r;
this.vx = vx;
this.vy = vy;
this.color = color;
}
//绘制函数 ：画圆
Ball.prototype.draw = function() {
ctx.beginPath();
ctx.fillStyle = this.color
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
ctx.fill();
}
//移动函数 ：变换圆心
Ball.prototype.move = function() {
if (this.x + this.r >= width || this.x - this.r <= 0) this.vx = -this.vx;
if (this.y + this.r >= height || this.y - this.r <= 0) this.vy = -this.vy;
this.x += this.vx;
this.y += this.vy;
}
//渲染函数 ：整合绘制、更新函数+递归调用
function render() {
ctx.clearRect(0,0,width,height);
ctx.fillStyle = 'transparent';
ctx.fillRect(0,0,width,height);
for(item of ballAr) {
item.draw();
item.move();
}
requestAnimationFrame(render);
}
render();
</script>
本帖最后由 加林森 于 2022-8-9 15:03 编辑 <br /><br />梦油 发表于 2022-7-29 18:16
嚯！那可十分了得啦。
一般一般。
<style>
#papa { margin: auto; width: 1024px; height: 640px; box-shadow: 3px 3px 20px #000; position: relative; }
#mama { position: absolute; width: 400px; height: 400px; left: calc(50% - 200px); top: calc(50% - 200px); border: 1px solid pink; }
#canv { position: absolute; }
</style>
<div id="papa">
<div id="mama"><canvas id="canv"></canvas></div>
</div>
<script>
let width = canv.width = mama.offsetWidth, height = canv.height = mama.offsetHeight;
let ctx = canv.getContext('2d');
//绘制对象
function Ball(x, y, r, vx, vy, color) {
this.x = x;
this.y = y;
this.r = r;
this.vx = vx;
this.vy = vy;
this.color = color;
}
Ball.prototype.draw = function() {
ctx.beginPath();
ctx.fillStyle = this.color
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
ctx.fill();
}
Ball.prototype.move = function() {
if (this.x + this.r >= width || this.x - this.r <= 0) this.vx = -this.vx;
if (this.y + this.r >= height || this.y - this.r <= 0) this.vy = -this.vy;
this.x += this.vx;
this.y += this.vy;
}
let myball = new Ball (60,60,20,0.5,1,'tan');
function render() {
ctx.clearRect(0,0,width,height);
ctx.fillStyle = 'transparent'; //'rgba(0,0,0,0)';
ctx.fillRect(0,0,width,height);
myball.draw();
myball.move();
requestAnimationFrame(render);
}
render();
</script>
加林森 发表于 2022-7-29 14:20
我创新了一下。
奇怪，之前看还好好的，现在怎么点开不对了？ 红影 发表于 2022-7-29 23:09
奇怪，之前看还好好的，现在怎么点开不对了？
现在一样可以点开的啊？怎么啦？ 红影 发表于 2022-7-29 23:09
奇怪，之前看还好好的，现在怎么点开不对了？
没有问题的啊。 加林森 发表于 2022-7-29 23:55
现在一样可以点开的啊？怎么啦？
嗯嗯，又去看了一下，没什么问题，是我自己弄错了{:4_173:} 红影 发表于 2022-7-29 23:59
嗯嗯，又去看了一下，没什么问题，是我自己弄错了
吓我一跳。
页:
1
[2]