創造を続け、成長を加速させましょう！「ナゲッツデイリーニュープラン・6月アップデートチャレンジ」に参加して5日目です。クリックしてイベントの詳細をご覧ください。

毎日書いていると、うっかりナゲッツのアバターを見たのですが、不規則にたくさんの円が並んでいて、珍しい仏教徒のようでした。お気軽に、この効果を実現するための皆さんを紹介し、キャンバスを復習します。

円を描く

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

ナゲッツのコード

誰もが自分のアイデアをすぐにノックアウトして、より興味深い効果を生み出すことができます。体验地址

キャンバスで仏教のアバターを生成する