Continue to create, accelerate growth! This is the 5th day of my participation in the "Nuggets Daily New Plan · June Update Challenge", click to view the event details

When I was writing every day, I accidentally saw my head portrait of Nuggets. A bunch of circles were arranged irregularly, which seemed unusually Buddhist. I’m free, or I’ll show you guys to achieve this effect. By the way, I will review canvas.

draw a circle

<!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>
复制代码

package it

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();
}
复制代码

Parameter description: color: Color, x: Coordinate of the center of the circle x, y: The y coordinate of the center of the circle, r: The size of the radius, start: The starting angle, end: The ending angle, anticlockwise: Whether it is counterclockwise or not

draw more circles

for (let i = 1; i <= 10; i++) {
    drawCircle('blue', 20 * i, 10 * i, 10, 0, 2 * Math.PI)
}
复制代码

random color

Randomly generate a number, you can read an article I wrote before. Randomly generate 6 digits, how would you write it?

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)
}
复制代码

random location

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)
}
复制代码

random size

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)
}
复制代码

add animation

function animate() {
    requestAnimationFrame(animate);
    drawCircle(getRandomColor(), getRandomPositionX(), getRandomPositionY(), getRandomSize(), 0, 2 * Math.PI)
}
animate();
复制代码

Stop after 100 are generated

let num = 0;
function animate() {
    if(num === 100) return;
    num++;
    requestAnimationFrame(animate);
    drawCircle(getRandomColor(), getRandomPositionX(), getRandomPositionY(), getRandomSize(), 0, 2 * Math.PI)
}
animate();
复制代码

random transparency

It is not easy to distinguish the balls when they are stacked together, and the transparency will be better:

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();
复制代码

Code on the Nuggets

Everyone can knock out their own ideas right away and create more interesting effects.体验地址

Generate a Buddhist avatar with canvas