使用canva制作一个乱弹的小球：
可以适当增加颜色数量。
基本思想
- 所有的球都要画在同一张画布之上，所有的小球都要有不同的初速度，不同的颜色，不同的大小，以及不同的运行方向。可以借助Math.radom()函数设置随机实现。
- 小球碰到画布边框时需要回弹，可以判断小球中心和边界距离。
让小球运动：
画球->清除画布->重新计算小球位置->清除画布->画球
循环步骤即可
开始
设置初始状态
控制的属性：
let width = document.body.clientWidth; //浏览器宽
let height = document.documentElement.clientHeight;//浏览器高
let bollNum = 20; //设置球的数量
let canPad = 80; //球生成的边界
let ballRadiusMin = 10; //球最小半径
let ballRadius = 50; //球最大半径
let raf; //动画
let cgn; //canvas 2d对象
let speedMax = 5; //球移动最大速度
let colorList = [ '#002fa7', '#eccc68', '#ffa502', '#ff7f50', '#ff6348']
球的属性：
let ballList = [
{
x: 0, //x
y: 0, //y
radius: 0, //半径
color: "#000000", //颜色
directionX: 0, //X左右移动方向 +1右 -1左
directionY: 0, //Y左右移动方向 +1下 -1上
speedX: 1, //x方向移动速度
speedY: 1, //y方向移动速度
},
];
开始运动
/** @type {HTMLCanvasElement} */ //vs code在获取canvas对象时标注可获得代码提示
let canvas = document.getElementById("canvas");
cgn = canvas.getContext("2d");
// 给canvas设置宽高
canvas.width = width;
canvas.height = height;
getBallList(bollNum); //生成球列表
drawBallList(); //将球画上去
drawColorPic(); //开始动画
function drawColorPic() {
ballMove(); //小球移动一帧
cgn.clearRect(0, 0, width, height); //清空画布
drawBallList(); //画小球
raf = requestAnimationFrame(drawColorPic); //生成动画
}
球的运动
- speedX为x方向速度，directionX为x轴运动方向，speedX与directionX可以计算小球下一帧x方向移动距离moveAdderX 。y轴同理。
- 判断小球下一帧是否撞墙，撞到的话更改对应的方向。
- 将移动增量moveAdder加到当前小球的x，y坐标
function ballMove() {
for (let i = 0; i < ballList.length; i++) {
let moveAdderX = ballList[i].speedX * ballList[i].directionX;
let moveAdderY = ballList[i].speedY * ballList[i].directionY;
if (
ballList[i].y + moveAdderY > height - ballList[i].radius ||
ballList[i].y + moveAdderY < ballList[i].radius
) {
ballList[i].directionY = -ballList[i].directionY;
}
if (
ballList[i].x + moveAdderX > width - ballList[i].radius ||
ballList[i].x + moveAdderX < ballList[i].radius
) {
ballList[i].directionX = -ballList[i].directionX;
}
ballList[i].x += moveAdderX;
ballList[i].y += moveAdderY;
}
}
完整代码：
<!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>Document</title>
<style>
* {
border: 0;
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #fafafa;
}
</style>
</head>
<body>
<canvas id="canvas">你的浏览器版本太太太低啦</canvas>
<script>
let width = document.body.clientWidth; //浏览器宽
let height = document.documentElement.clientHeight;//浏览器高
let bollNum = 20; //设置球的数量
let canPad = 80; //球生成的边界
let ballRadiusMin = 30; //球最小半径
let ballRadius = 80; //球最大半径
let raf; //动画
let cgn; //canvas 2d对象
let speedMax = 5; //球移动最大速度
let colorList = [ '#002fa7', '#eccc68', '#ffa502', '#ff7f50', '#ff6348'];
let colLisLength = colorList.length;
// 球的基本属性
let ballList = [
{
x: 0, //x
y: 0, //y
radius: 0, //半径
color: "#000000", //颜色
directionX: 0, //X左右移动方向 +1右 -1左
directionY: 0, //Y左右移动方向 +1下 -1上
speedX: 1, //x方向移动速度
speedY: 1, //y方向移动速度
},
];
/** @type {HTMLCanvasElement} */ //vs code在获取canvas对象时标注可获得代码提示
let canvas = document.getElementById("canvas");
cgn = canvas.getContext("2d");
// 给canvas设置宽高
canvas.width = width;
canvas.height = height;
getBallList(bollNum); //生成球列表
drawBallList(); //将球画上去
drawColorPic(); //开始动画
function drawColorPic() {
ballMove();
cgn.clearRect(0, 0, width, height);
drawBallList();
raf = requestAnimationFrame(drawColorPic);
}
function ballMove() {
for (let i = 0; i < ballList.length; i++) {
let moveAdderX = ballList[i].speedX * ballList[i].directionX;
let moveAdderY = ballList[i].speedY * ballList[i].directionY;
if (
ballList[i].y + moveAdderY > height - ballList[i].radius ||
ballList[i].y + moveAdderY < ballList[i].radius
) {
ballList[i].directionY = -ballList[i].directionY;
}
if (
ballList[i].x + moveAdderX > width - ballList[i].radius ||
ballList[i].x + moveAdderX < ballList[i].radius
) {
ballList[i].directionX = -ballList[i].directionX;
}
ballList[i].x += moveAdderX;
ballList[i].y += moveAdderY;
}
}
// 生成球列表
function getBallList(number) {
for (let i = 0; i < number; i++) {
let x = getRadom(canPad, width - canPad);
let y = getRadom(canPad, height - canPad);
let color = colorList[getRadom(0, colLisLength)];
let radius = getRadom(ballRadiusMin, ballRadius);
let directionX = getRadom(0, 2) == 0 ? -1 : 1;
let directionY = getRadom(0, 2) == 0 ? -1 : 1;
let speedX = getRadom(1, speedMax);
let speedY = getRadom(1, speedMax);
ballList[i] = {
x,y, color,radius,directionX,directionY, speedX, speedY,
};
}
}
// 画一个球
function drawBall(x, y, radius, color) {
cgn.save();
cgn.beginPath();
cgn.fillStyle = color;
cgn.arc(x, y, radius, 0, 2 * Math.PI, true);
cgn.fill();
cgn.restore();
}
function drawBallList() {
for (let i = 0; i < ballList.length; i++) {
drawBall(
ballList[i].x,
ballList[i].y,
ballList[i].radius,
ballList[i].color
);
}
}
// 生成一个随机数
function getRadom(min, max) {
let radomer = Math.floor(Math.random() * (max - min)) + min;
return radomer;
}
</script>
</body>
</html>
放两堆颜色数组选择
可替换colorList
let colorList = [
'#002fa7', '#eccc68', '#ffa502', '#ff7f50', '#ff6348',
'#ff6b81', '#ff4757', '#a4b0be', '#55efc4', '#00b894',
'#81ecec', '#00cec9', '#74b9ff', '#0984e3', '#a29bfe',
'#6c5ce7', '#ffeaa7', '#fdcb6e', '#fab1a0', '#e17055',
'#ff7675', '#d63031', '#fd79a8', '#e84393', '#5352ed',
'#3742fa', '#7bed9f', '#2ed573', '#ff4757', '#ff6b81',
'#ff6348', '#ff7f50', '#be2edd', '#e056fd', '#22a6b3',
'#7ed6df', '#c23616', '#d980fa', '#c4e538', '#130f40'
]
let colorList = [
"#7cb5ec","#434348","#90ed7d","#f7a35c","#8085e9",
"#f15c80","#e4d354","#2b908f","#f45b5b","#91e8e1",
"#058DC7","#50B432","#ED561B","#DDDF00","#24CBE5",
"#64E572","#FF9655","#FFF263","#6AF9C4","#D47F00",
"#00FFFF","#D4FF55","#4572A7","#AA4643","#89A54E",
"#80699B","#3D96AE","#DB843D","#92A8CD","#A47D7C",
"#7FBF55","#a5c2d5","#cbab4f","#76a871","#a56f8f",
"#c12c44","#9f7961","#76a871","#6f83a5","#0f4fb8",
"#106dcf","#b3d74c","#74aae3","#5cdec6","#3526de",
"#9d65ee","#a8b3e3","#6bc1b7","#549ee2","#6e98d6",
];
可以适当添加一些模糊效果
<style>
.mask {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
backdrop-filter: blur(16px); //设置模糊
z-index: 3; //调整层级
}
</style>
<body>
<canvas id="canvas">你的浏览器版本太太太低啦</canvas>
<div class="mask"></div>
</body>
再简单写一个表单
可以使用2D变换加过渡切换表单
就完成了一个简单的登录页面 : )
本文含有隐藏内容，请 开通VIP 后查看