Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <style>
- canvas{
- background-color: black;
- }
- </style>
- <title>Document</title>
- <script>
- document.addEventListener('DOMContentLoaded', () => {
- let canvas = document.querySelector('canvas');
- let context = canvas.getContext('2d');
- let btns = document.querySelectorAll('.btn');
- btns.forEach(item => {
- item.addEventListener('click', (e) => {
- e.preventDefault();
- let dt = e.target.dataset.canvas;
- context.clearRect(0, 0, canvas.width, canvas.height);
- fetch('data-'+dt+'.json')
- .then(r => r.json())
- .then(data => {
- console.log(data);
- for(let i = 0; i < 25; i++){
- for(let j = 0; j < 25; j++){
- context.fillStyle = data[i*25 + j];
- context.fillRect(i*25, j*25, 25, 25);
- }
- }
- });
- });
- });
- });
- </script>
- </head>
- <body>
- <div class="container">
- <div class="row">
- <div class="col">
- <canvas width="625" height="625"></canvas>
- </div>
- <div class="col">
- <ul class="list-group">
- <li class="list-group-item">
- <a href="" class="btn btn-primary" data-canvas="1">Load Canvas 1</a>
- </li>
- <li class="list-group-item">
- <a href="" class="btn btn-primary" data-canvas="2">Load Canvas 2</a>
- </li>
- <li class="list-group-item">
- <a href="" class="btn btn-primary" data-canvas="3">Load Canvas 3</a>
- </li>
- <li class="list-group-item">
- <a href="" class="btn btn-primary" data-canvas="4">Load Canvas 4</a>
- </li>
- <li class="list-group-item">
- <a href="" class="btn btn-primary" data-canvas="5">Load Canvas 5</a>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement