Last active
March 22, 2021 05:48
-
-
Save xhackjp1/e11a0d147d52c91a07ba1cc2f53af614 to your computer and use it in GitHub Desktop.
Canvasで市松模様を書く
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <canvas id="canvas" width="500" height="500"></canvas> | |
| <script> | |
| const canvas = document.getElementById('canvas'); | |
| const ctx = canvas.getContext('2d'); | |
| function drawIchimatsu(patern1, patern2) { | |
| for (let i = 0; i < 10; i++) { | |
| for (let j = 0; j < 10; j++) { | |
| setTimeout(() => drawRect(i, j, patern1, patern2), 40 * (i+j)); | |
| } | |
| } | |
| } | |
| function drawRect(i, j, patern1, patern2) { | |
| ctx.fillStyle = ((i + j) % 2 == 0) ? patern1 : patern2; | |
| ctx.fillRect(20 * i, 20 * j, 20, 20); | |
| } | |
| setInterval(() => { drawIchimatsu("#cd12ab", "#ee1288") }, 1000); | |
| setInterval(() => { drawIchimatsu("#dc338f", "#cc336e") }, 1500); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <canvas id="canvas" width="480" height="480"></canvas> | |
| <script> | |
| const canvas = document.getElementById('canvas'); | |
| const ctx = canvas.getContext('2d'); | |
| const PANEL_SIZE = 30 | |
| const REPEAT_COUNT = 480 / PANEL_SIZE | |
| const INTERVAL = 20 | |
| function drawIchimatsu(patern1, patern2) { | |
| for (let i = 0; i < REPEAT_COUNT; i++) { | |
| for (let j = 0; j < REPEAT_COUNT; j++) { | |
| setTimeout(() => drawRect(i, j, patern1, patern2), INTERVAL * (i+j)); | |
| } | |
| } | |
| } | |
| function drawRect(i, j, patern1, patern2) { | |
| ctx.fillStyle = ((i + j) % 2 == 0) ? patern1 : patern2; | |
| ctx.fillRect(PANEL_SIZE * i, PANEL_SIZE * j, PANEL_SIZE, PANEL_SIZE); | |
| } | |
| setInterval(() => { drawIchimatsu("RGB(79, 172, 135)", "RGB(41, 37, 34)") }, 1000); | |
| setInterval(() => { drawIchimatsu("RGB(41, 37, 34)", "RGB(79, 172, 135)") }, 4250); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment