Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <script type="text/javascript">
- document.addEventListener("DOMContentLoaded", function(){
- let canvas = document.getElementById('canvasId');
- let canvasId = canvas.getContext("2d");
- let shapes = [];
- for(let i = 0; i < 10; i++){
- let w = Math.floor(Math.random()*(100-50 + 1) + 50);
- let h = Math.floor(Math.random()*(100-50 + 1) + 50);
- let color = colorPicker();
- let x = Math.floor(Math.random()*700);
- let y = Math.floor(Math.random()*700);
- canvasId.fillStyle = color;
- canvasId.fillRect(x, y, w, h);
- shapes.push({x: x, y: y, width: w, height: h, color: color});
- }
- canvas.addEventListener('click', (e) => {
- let activeColor = undefined;
- for(let i = 0; i < shapes.length; i++){
- canvasId.beginPath();
- canvasId.rect(shapes[i].x, shapes[i].y, shapes[i].width, shapes[i].height);
- canvasId.closePath();
- if(canvasId.isPointInPath(e.offsetX, e.offsetY)){
- activeColor = shapes[i].color;
- console.log('works');
- }
- }
- if(activeColor == undefined){
- canvasId.clearRect(0, 0, canvas.width, canvas.height);
- for(let i = 0; i < shapes.length; i++){
- let x = Math.floor(Math.random()*700);
- let y = Math.floor(Math.random()*700);
- canvasId.fillStyle = activeColor == undefined ? shapes[i].color : activeColor;
- canvasId.fillRect(x, y, shapes[i].width, shapes[i].height);
- shapes[i].x = x;
- shapes[i].y = y;
- }
- } else {
- canvasId.clearRect(0, 0, canvas.width, canvas.height);
- for(let i = 0; i < shapes.length; i++){
- canvasId.fillStyle = activeColor == undefined ? shapes[i].color : activeColor;
- canvasId.fillRect(shapes[i].x, shapes[i].y, shapes[i].width, shapes[i].height);
- }
- }
- });
- });
- let colorPicker = () => {
- let c = ['A', 'B', 'C', 'D', 'E', 'F', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
- let color = '#';
- for(let i = 0; i < 6; i++){
- color = color + c[Math.floor(Math.random()*16)];
- }
- return color;
- }
- const mouse_player1 = (evt, canvas) => {
- var rect = canvas.getBoundingClientRect(); // взима позицията на платното в документа, в случай, че то не започва от горния ляв ъгъл
- var mouseX = evt.clientX - rect.left; // позицията на курсора по хоризонтала
- var mouseY = evt.clientY - rect.top; // позиията на курсора по вертикала
- return {
- x: mouseX,
- y: mouseY,
- } // фунцкията връша два параметъра, x и y
- }
- </script>
- <style>
- canvas{
- background-color: black;
- }
- </style>
- </head>
- <body>
- <canvas width="800" height="800" id="canvasId"></canvas>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement