API tools faq
paste
Advertisement
fevzi02

Lenur5LAB.html

fevzi02
Jan 26th, 2022
1,000
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.31 KB | None | 0 0
raw download clone embed print report
  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
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!