使い捨てコード

人型アイコンを次第に大きくしつつ並べる

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Icon Matrix</title>
    <!-- Font Awesomeのスタイルシートのリンクを追加 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.3/html2canvas.min.js"></script>
    <style>
        #iconMatrix {
            white-space: nowrap; /* アイコンが新しい行に折り返されるのを防ぎます */
            line-height: 0; /* アイコン間の垂直スペースを削除 */
            padding-top: 50px; /* アイコンがはみ出ないように上部にパディングを追加 */
        }
        .icon {
            display: inline-block; /* アイコンをインラインブロック要素として設定 */
            transform-origin: 50% 100%; /* 変換の原点をアイコンの下部に設定 */
            vertical-align: bottom; /* 足元を揃える */
        }
    </style>
</head>
<body>

<div id="iconMatrix"></div>

<script>
const numberOfIcons = 10; // アイコンの数を10に設定
const container = document.getElementById("iconMatrix");

for (let i = 0; i < numberOfIcons; i++) {
    let icon = document.createElement("i");
    icon.className = "fas fa-male icon"; // iconクラスを追加
    icon.style.color = "darkblue";
    
    // scale変換を使用して、アイコンを徐々に大きくします
    let scale = 1 + i * 0.5; // または、適切なスケーリングファクターに調整してください
    icon.style.transform = `scale(${scale})`;
    
    // marginを動的に設定して、アイコン間の間隔を調整します
    let margin = i * 15; // または、適切なマージン値に調整してください
    icon.style.marginRight = `${margin}px`; // 右マージンのみ設定
    
    container.appendChild(icon);
}

// DOMの描画が完了したら実行される関数
window.onload = function() {
    html2canvas(container, {scale: 2}).then(canvas => { // scaleオプションで出力画像の解像度を高める
        // canvasをPNGとして保存する
        let link = document.createElement('a');
        link.download = 'iconMatrix.png';
        link.href = canvas.toDataURL()
        link.click();
    });
};
</script>

</body>
</html>

男女のアイコンを整列させる

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Icon Matrix</title>
    <!-- Font Awesomeのスタイルシートのリンクを追加 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.3/html2canvas.min.js"></script>
</head>
<body>

<div id="iconMatrix"></div>

<script>
const matrixSize = 5;
const container = document.getElementById("iconMatrix");

for (let i = 0; i < matrixSize; i++) {
    for (let j = 0; j < matrixSize; j++) {
        let icon = document.createElement("i");
        if ((i + j) % 2 === 0) {
            icon.className = "fas fa-male";
            icon.style.color = "darkblue";
        } else {
            icon.className = "fas fa-female";
            icon.style.color = "darkred";
        }
        icon.style.margin = "2px";
        container.appendChild(icon);
    }
    container.appendChild(document.createElement("br"));
}

// DOMの描画が完了したら実行される関数
window.onload = function() {
    html2canvas(container).then(canvas => {
        // canvasをPNGとして保存する
        let link = document.createElement('a');
        link.download = 'iconMatrix.png';
        link.href = canvas.toDataURL()
        link.click();
    });
};
</script>

</body>
</html>