Canvasで円を並べる

JavaScriptのCanvasで円を並べてみました。

円を並べることは、横幅・縦幅の感覚などいろいろ理解できるので、基本としていいかなと思っています。

今回はforで円をつくり、それを割り算の商と余で縦と横に並べる方法を使っています。

このやり方は書籍「Designing Math.　数学とデザインをむすぶプログラミング入門」で知りました。

Designing Math.　数学とデザインをむすぶプログラミング入門

並べた画像

まずは円を並べた画像です。

折り返していることがわかるように右端に隙間を開けています。

円を並べるコード

円を並べている部分のコードはこちらです。

for文で円を発生させて、x軸は余りをとり、y軸は商をとってます。

商はMath.floor()を使って整数だけにします。

ctx.strokeStyle = 'red' // 円の枠線の色
for (let i = 0; i < n; i++) {
    let x = i % yoko
    let y = Math.floor(i / yoko)
    ctx.beginPath()
    ctx.arc(r + x * r * 2, r + y * r * 2, r, 0, Math.PI * 2, false)
    ctx.stroke()
}

コード全体

右端の余白はなくした版のコードです。

let canvas, ctx
let curYubiX, curYubiY

window.addEventListener('load', () => {
    canvas = document.getElementById('canvas')
    ctx = canvas.getContext('2d')

    ctx.fillStyle = 'antiquewhite'
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    setup()

    function setup() {
        let n = 73 // 円の全個数
        let r = 64 // 半径
        let yoko = 10 // 横に並ぶ円の個数

        ctx.strokeStyle = 'red' // 円の枠線の色
        for (let i = 0; i < n; i++) {
            let x = i % yoko
            let y = Math.floor(i / yoko)
            ctx.beginPath()
            ctx.arc(r + x * r * 2, r + y * r * 2, r, 0, Math.PI * 2, false)
            ctx.stroke()
        }
    }

    // 画像ダウンロード
    let btn = document.getElementById('btn')
    btn.addEventListener('click', () => {
        let a = document.createElement('a')
        a.href = canvas.toDataURL('image/png,1.0')
        a.download = 'canvas-en_narabe'
        a.click()
    })
})

yuuuha.hatenablog.com