持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情
正愁每天更文写啥时，无意间看到我掘金的头像，一堆圆圈无规则排列在一起，显得异常佛系，随意，要不就带大家实现这个效果呗，顺便复习下canvas
画个圆
<!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>
</head>
<body>
<canvas id="canvas" width="300" height="200"></canvas>
</body>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 100, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.fillStyle = 'blue';
ctx.fill();
</script>
</html>
封装一下
drawCircle('blue', 100, 100, 100, 0, 2 * Math.PI);
function drawCircle(color, x, y, r, start, end, anticlockwise = false) {
ctx.beginPath();
ctx.arc(x, y, r, start, end, anticlockwise);
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
}
参数说明：color: 颜色，x: 圆心的x坐标，y: 圆心的y坐标， r：半径大小， start: 起始角度，end: 结束角度，anticlockwise： 是否逆时针
多画几个圆
for (let i = 1; i <= 10; i++) {
drawCircle('blue', 20 * i, 10 * i, 10, 0, 2 * Math.PI)
}
随机颜色
随机生成一个数字可以看我之前写的一篇文章 随机生成6位数字，你会怎么写？
function getRandomColor() {
return '#' + Math.random().toString(16).slice(2, 8);
}
for (let i = 1; i <= 10; i++) {
drawCircle(getRandomColor(), 20 * i, 10 * i, 10, 0, 2 * Math.PI)
}
随机位置
function getRandomPositionX() {
return Math.floor(Math.random() * 300);
}
function getRandomPositionY() {
return Math.floor(Math.random() * 200);
}
for (let i = 1; i <= 10; i++) {
drawCircle(getRandomColor(), getRandomPositionX(), getRandomPositionY(), 10, 0, 2 * Math.PI)
}
随机大小
function getRandomSize() {
return 3 + Math.floor(Math.random() * 17);
}
for (let i = 1; i <= 10; i++) {
drawCircle(getRandomColor(), getRandomPositionX(), getRandomPositionY(), getRandomSize(), 0, 2 * Math.PI)
}
加上动效
function animate() {
requestAnimationFrame(animate);
drawCircle(getRandomColor(), getRandomPositionX(), getRandomPositionY(), getRandomSize(), 0, 2 * Math.PI)
}
animate();
生成100个后停止
let num = 0;
function animate() {
if(num === 100) return;
num++;
requestAnimationFrame(animate);
drawCircle(getRandomColor(), getRandomPositionX(), getRandomPositionY(), getRandomSize(), 0, 2 * Math.PI)
}
animate();
随机透明度
球球叠在一起不便于区分，加上透明度会好一些：
function getRandomNum() {
return Math.floor(Math.random() * 256);
}
function getRandomColorWithTransparent() {
return `rgba(${getRandomNum()}, ${getRandomNum()}, ${getRandomNum()}, ${Math.random()})`;
}
let num = 0;
function animate() {
if (num === 100) return;
num++;
requestAnimationFrame(animate);
drawCircle(getRandomColorWithTransparent(), getRandomPositionX(), getRandomPositionY(), getRandomSize(), 0, 2 * Math.PI)
}
animate();
码上掘金
大家可以在马上掘金把自己的想法敲出来，创造更多有趣的效果。 体验地址
