Advertisement
lkolev

Canvas IP

Jan 16th, 2022
939
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"/>
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  8.     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  9.     <script type="text/javascript">
  10.         class Element{
  11.             constructor(x,y) {
  12.                 this.x=x
  13.                 this.y=y
  14.             }
  15.         }
  16.  
  17.         class Pravoagolnik extends Element{
  18.             constructor(x,y,w,h) {
  19.                 super(x,y);
  20.                 this.w=w
  21.                 this.h=h
  22.             }
  23.         }
  24.  
  25.         class Krug extends Element{
  26.  
  27.             constructor(x,y,r) {
  28.                 super(x, y);
  29.                 this.r=r
  30.             }
  31.         }
  32.  
  33.         $(document).ready(function (){
  34.             let color="black"
  35.             let elements=[]
  36.  
  37.             $.getJSON("objekti.json",function (data){
  38.                 $.each(data, function (key,val){
  39.                     if(String(val['tip'])==="Pravoagolnik"){
  40.                         let x=parseInt(val['x'])
  41.                         let y=parseInt(val['y'])
  42.                         let w=parseInt(val['w'])
  43.                         let h=parseInt(val['h'])
  44.                         elements[elements.length]=new Pravoagolnik(x,y,w,h)
  45.                     }
  46.                     else{
  47.                         let x=parseInt(val['x'])
  48.                         let y=parseInt(val['y'])
  49.                         let r=parseInt(val['r'])
  50.                         elements[elements.length]=new Krug(x, y, r)
  51.                     }
  52.                 })
  53.                 drawCanvas()
  54.             })
  55.             console.log(elements)
  56.  
  57.             $('#changeColorButton').click(function (){
  58.                 color=$('#colorPicker')[0].value
  59.                 console.log(color)
  60.                 clearCanvas()
  61.                 drawCanvas()
  62.             })
  63.  
  64.             $('#canvas').click(function (e){
  65.                 let xCoord=e.offsetX, yCoord=e.offsetY
  66.  
  67.                 let randomSelect=Math.round(Math.random())
  68.                 let newElement
  69.                 if(randomSelect===0)
  70.                     newElement=new Pravoagolnik(parseInt(xCoord),parseInt(yCoord),30,30)
  71.                 else
  72.                     newElement=new Krug(parseInt(xCoord),parseInt(yCoord), 10)
  73.                 elements[elements.length]=newElement
  74.                 clearCanvas()
  75.                 drawCanvas()
  76.             })
  77.  
  78.             function clearCanvas(){
  79.                 const canvas=$("#canvas")[0]
  80.                 const context=canvas.getContext('2d')
  81.                 context.clearRect(0,0,canvas.width,canvas.height)
  82.             }
  83.  
  84.             function drawCanvas(){
  85.                 let canvas=document.getElementById("canvas")
  86.                 let ctx=canvas.getContext('2d')
  87.                 for(let i=0;i<elements.length;i++){
  88.                    let e=elements[i]
  89.                    ctx.beginPath()
  90.                    ctx.fillStyle=color
  91.                    if(e.constructor.name==="Pravoagolnik")
  92.                        ctx.rect(e.x, e.y, e.w, e.h)
  93.                    else
  94.                        ctx.arc(e.x, e.y, e.r, 0, 2.0 * Math.PI,false)
  95.  
  96.                    ctx.fill()
  97.                }
  98.            }
  99.        })
  100.  
  101.  
  102.    </script>
  103.     <noscript><p>This page requires JavaScript support</p></noscript>
  104. </head>
  105. <body>
  106.     <canvas id="canvas" style="border: 1px solid black"></canvas>
  107.     <input id="colorPicker" type="color">
  108.     <button id="changeColorButton">draw</button>
  109. </body>
  110. </html>
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement