Advertisement
fevzi02

Lenur5LAB.html

Jan 26th, 2022
886
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="ru">
  3. <head>
  4. <meta charset='utf-8'>
  5. </head>
  6.     <body>
  7.         <canvas id="pic" width="500" height="500" style="border:1px solid red">
  8.         </canvas><br/>
  9.         <p id="mousePointerCoords">Coords will apear here</p>
  10.         <button onclick="resetAll()">reset</button>
  11.         <button onclick="checking=true;anim=draw()">animate</button>
  12.         <button onclick="clearInterval(anim)">stop</button>
  13.  
  14.         <script type="text/javascript">
  15.             let c=document.getElementById('pic');
  16.             let ctx = c.getContext('2d');
  17.             let mpc = document.getElementById('mousePointerCoords');
  18.             let x, y, anim;
  19.             let offx = 3, offy = 0;
  20.             let colors = ['#dedede', '#f78a40', '#2b2b2b'];
  21.             let polygons =
  22.             [
  23.                 [[120, 400], [228, 400], [270, 355], [100, 355]],
  24.                 [[140, 355], [220, 355], [220, 335], [140, 335]],
  25.                 [[170, 335], [195, 335], [168, 310], [158, 310]]
  26.             ];
  27.             let polygonsForReset = polygons;
  28.             let intersect = false;
  29.             let border = false;
  30.             let checking = false;
  31.  
  32.             //-----------------------------------------------------------------
  33.             var plot = function(x, y) { //кисточка - ставит пиксель своего цвета
  34.                 if(isFinite(x) && isFinite(y)){
  35.                    setPixel(x,y, plot.color);
  36.                 }
  37.             };
  38.  
  39.             function setPixel (x,y,c) { //ставит пиксель цвета с
  40.                 var p=ctx.createImageData(1,1);
  41.                 p.data[0]=c.r;
  42.                 p.data[1]=c.g;
  43.                 p.data[2]=c.b;
  44.                 p.data[3]=c.a;
  45.                 var data = ctx.getImageData(x, y, 1,1).data;
  46.                 if(data[3] <= p.data[3]) //сравниваем прозрачность
  47.                    ctx.putImageData(p,x,y);
  48.            }
  49.  
  50.            function drawLine(x1, y1, x2, y2, color) {
  51.                if(color)  {
  52.                    plot.color = color;
  53.                } else {
  54.                    plot.color = {r:0,g:0,b:0,a:255}; //цвет по умолчанию - черный
  55.                }
  56.                var deltaX = Math.abs(x2 - x1);
  57.                var deltaY = Math.abs(y2 - y1);
  58.                var signX = x1 < x2 ? 1 : -1;
  59.                var signY = y1 < y2 ? 1 : -1;
  60.                //
  61.                var error = deltaX - deltaY;
  62.                //
  63.                plot(x2, y2);
  64.                while(x1 != x2 || y1 != y2)
  65.               {
  66.                    plot(x1, y1);
  67.                    var error2 = error * 2;
  68.                    //
  69.                    if(error2 > -deltaY)
  70.                     {
  71.                         error -= deltaY;
  72.                         x1 += signX;
  73.                     }
  74.                     if(error2 < deltaX)
  75.                    {
  76.                        error += deltaX;
  77.                        y1 += signY;
  78.                    }
  79.                }
  80.            }
  81.            //-----------------------------------------------------------------
  82.  
  83.  
  84.            c.onmousedown = function(e)
  85.            {
  86.                x = e.pageX-8;
  87.                y = e.pageY-8;
  88.                if(!checking) ctx.fillRect(x-1, y-1, 3,3);
  89.                else
  90.                {
  91.                    if(isInPolygons([x, y]))
  92.                    {
  93.                        alert('Попал');
  94.                        clearInterval(anim);
  95.                        ctx.fillStyle =
  96.                        pointAt(x, y);
  97.                    }
  98.                    else alert('Мимо');
  99.  
  100.                }
  101.                mpc.innerText=x+' '+y;
  102.            }
  103.  
  104.            function resetAll()
  105.            {
  106.                checking = false;
  107.                polygons = polygonsForReset;
  108.                ctx.clearRect(0,0,500,500);
  109.            }
  110.            function pointAt(x, y)
  111.            {
  112.                let c = ctx.fillStyle;
  113.                ctx.fillStyle = '#000000';
  114.                ctx.fillRect(x-1, y-1, 3,3);
  115.                ctx.fillStyle = c;
  116.            }
  117.            function mul(p, b, e)
  118.            {
  119.                return Math.sign((p[0] - b[0])*(e[1] - b[1]) - (p[1] - b[1])*(e[0] - b[0]));
  120.            }
  121.  
  122.            function typeofEdge(p, ebeg, eend)
  123.            {
  124.                let s = mul(p, ebeg, eend);
  125.                if (s > 0) return ((eend[1] < p[1]) && (p[1] <= ebeg[1])) ? 1 : 0;
  126.                else if (s < 0) return ((ebeg[1] < p[1]) && (p[1] <= eend[1])) ? 1 : 0;
  127.                else return -1;
  128.            }
  129.            // /report/outline/user.php?id=26287&course=5274&mode=outline
  130.            function isInPolygons(point)
  131.            {
  132.                for(poly of polygons)
  133.                {
  134.                    console.log(poly)
  135.                    let l = poly.length;
  136.                    intersect = false;
  137.                    border = false;
  138.                    for(let i=0; i<l; i++)
  139.                    {
  140.                        if(typeofEdge(point, poly[i%l], poly[(i+1)%l])==1) intersect = !intersect;
  141.                        else if(typeofEdge(point, poly[i%l], poly[(i+1)%l])==-1) { border = true; break;}
  142.                    }
  143.                    if(border || intersect) return true;
  144.                }
  145.                return false;
  146.            }
  147.  
  148.            function draw()
  149.            {
  150.                return setInterval(function()
  151.                {
  152.                  ctx.clearRect(0,0,500,500);
  153.                    for(let i=0;i<polygons.length;i++)
  154.                    {
  155.                        polygons[i][0][0] += offx; polygons[i][0][1] += offy;
  156.  
  157.                        for(let j=1;j<polygons[i].length;j++)
  158.                        {
  159.                            polygons[i][j][0]+=offx;
  160.                            polygons[i][j][1]+=offy;
  161.                            drawLine(polygons[i][j][0], polygons[i][j][1],polygons[i][(j+1)%polygons[i].length][0], polygons[i][(j+1)%polygons[i].length][1],{r:255, g:0,b:0,a:255})
  162.                            drawLine(polygons[i][0][0], polygons[i][0][1], polygons[i][1][0], polygons[i][1][1],{r:255, g:0,b:0,a:255})
  163.                        }
  164.  
  165.                    }
  166.                }, 100);
  167.            }
  168.  
  169.            </script>
  170.     </body>
  171. </html>
  172.  
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement