API tools faq
paste
Advertisement
fevzi02

3lab

fevzi02
Feb 6th, 2022
874
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 9.36 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.         <title>3 Лаба</title>
  6.     </head>
  7.     <body>
  8.         <canvas width="600" height="600" id="canvas"></canvas><br>
  9.  
  10.  
  11.         <style>
  12.  
  13.             body
  14.             {
  15.                 background: #C5D0E6
  16.             }
  17.  
  18.             canvas
  19.             {
  20.                 display: block;
  21.                 margin: auto auto;
  22.                 border: 1px solid #04112F;
  23.                 background: #CBB6CE;
  24.             }
  25.         </style>
  26.            
  27.         <script>
  28.         let c = document.getElementById('canvas');
  29.         let ctx = c.getContext('2d');
  30.        
  31.         var plot = function(x, y){
  32.             if(isFinite(x) && isFinite(y))
  33.            {
  34.                setPixel(x,y, plot.color);
  35.             }
  36.         };
  37.        
  38.         function setPixel (x, y, c)
  39.         {
  40.             var p = ctx.createImageData(1,1);
  41.             var data = ctx.getImageData(x, y, 1, 1).data;
  42.  
  43.             p.data[0]=c.r;
  44.             p.data[1]=c.g;
  45.             p.data[2]=c.b;
  46.             p.data[3]=c.a;
  47.            
  48.             if(data[3] <= p.data[3]) //сравниваем прозрачность
  49.            ctx.putImageData(p,x,y);
  50.        }
  51.        
  52.        //---------------------------   Отрисовка линии по Алгоритму Брезенхема   ---------------------------------------
  53.        function drawLine(x1, y1, x2, y2, color)
  54.        {
  55.            if(color)  
  56.                plot.color = color;
  57.             else
  58.                plot.color = {r:0,g:0,b:0,a:255};
  59.            
  60.            var deltaX = Math.abs(x2 - x1);
  61.            var deltaY = Math.abs(y2 - y1);
  62.            var signX  = x1 < x2 ? 1 : -1;
  63.            var signY  = y1 < y2 ? 1 : -1;
  64.            var error  = deltaX - deltaY;
  65.  
  66.            plot(x2, y2);
  67.            while(x1 != x2 || y1 != y2)
  68.            {
  69.                plot(x1, y1);
  70.                var error2 = error * 2;
  71.  
  72.                if(error2 > -deltaY)
  73.                 {
  74.                     error -= deltaY;
  75.                     x1 += signX;
  76.                 }
  77.                 if(error2 < deltaX)
  78.                {
  79.                    error += deltaX;
  80.                    y1 += signY;
  81.                }
  82.            }
  83.        }
  84.  
  85.    
  86.    //---------------------------   Отрисовка окружности по Алгоритму Брезенхема   ----------------------------------
  87.  
  88.        function drawСircle(x0, y0, radius, color, flag=1)  //x0, y0 - центр окружности; flag - отвечает за заливку окружности;
  89.        {  
  90.            if(color)  
  91.                plot.color = color;
  92.            else
  93.                plot.color = {r:0,g:0,b:0,a:255};
  94.            while (radius > 1)
  95.             {
  96.                 let x = 0, y = radius, gap = 0, delta = (2 - 2 * radius);
  97.                 while (y >= 0)
  98.                 {  
  99.                     plot(x0 + x, y0 - y, 1);
  100.                     plot(x0 - x, y0 - y, 1);
  101.                     plot(x0 - x, y0 + y, 1);
  102.                     plot(x0 + x, y0 + y, 1);
  103.  
  104.                     gap = 2 * (delta + y) - 1;
  105.                     if (delta < 0 && gap <= 0)
  106.                    {
  107.                        x += 1;
  108.                        delta += 2 * x + 1;
  109.                        continue;
  110.                    }
  111.                    if (delta > 0 && gap > 0)
  112.                    {
  113.                        y -= 1;
  114.                         delta -= 2 * y + 1;
  115.                         continue;
  116.                     }
  117.                     x += 1;
  118.                     delta += 2 * (x - y);
  119.                     y -= 1;
  120.                 }
  121.  
  122.                 if (flag)        //если нам нужно залить окружность, просто уменьшаем радиус и отрисовываем до тех пор пока радиус не станет равен 1
  123.                     radius -= 1;
  124.                 else
  125.                     return;    
  126.             }
  127.         }
  128.  
  129.         //---------------------------   Отрисовка прямоугольника    ----------------------------------
  130.         function drawRect(x1, y1, x2, y2, color, flag=1) //x1, y1 - координаты левой верхней точки; x2,y2 - координаты правой нижней точки; flag - отвечает за заливку прямоугольника;  
  131.         {
  132.             if(color)  
  133.                 plot.color = color;
  134.             else
  135.                 plot.color = {r:0,g:0,b:0,a:255};
  136.             if(flag)
  137.                 {
  138.                     for(let y = y1; y<=y2; y++)
  139.                    {
  140.                        drawLine(x1, y, x2, y, color);  
  141.                    }
  142.                }
  143.            else
  144.            {    
  145.                drawLine(x1, y1, x2, y1, color);
  146.                drawLine(x1, y1, x1, y2, color);
  147.                drawLine(x2, y2, x1, y2, color);
  148.                drawLine(x2, y2, x2, y1, color);
  149.            }    
  150.        }
  151.  
  152.        //---------------------------   Отрисовка многоугольника(треугольника)   ----------------------------------
  153.        function drawPolygon(coords, color, flag = 0) //coords - 2мерный список координат многоугольника(треугольника);
  154.        {                                             //пример: [[0, 0], [100, 0], [50, 50]]
  155.            if(color)  
  156.                plot.color = color;
  157.            else
  158.                plot.color = {r:0,g:0,b:0,a:255};
  159.  
  160.            for(let i = 0; i<coords.length;i++)
  161.            {
  162.                drawLine(coords[i][0], coords[i][1], coords[(i+1)%coords.length][0], coords[(i+1)%coords.length][1], color);
  163.            }
  164.        }
  165.        //-------------------------------------Отрисовка В-Сплайна-------------------------------------------------------------
  166.        function drawSpline(args, color)
  167.        {
  168.            if(color)  
  169.                plot.color = color;
  170.             else
  171.                plot.color = {r:0,g:0,b:0,a:255};
  172.            
  173.  
  174.            let coords = [[args[0], args[1]]];
  175.            let num = 0;
  176.            let deltaX;
  177.            let deltaY;
  178.  
  179.            for(let i = 0; i<args.length; i+=2)
  180.            {
  181.                coords.push([args[i], args[i+1]])
  182.                if (i > 0)
  183.                 {
  184.                     deltaX = coords[Math.floor(i/2+1)][0] - coords[Math.floor(i/2)][0]
  185.                     deltaY = coords[Math.floor(i/2+1)][1] - coords[Math.floor(i/2)][1]
  186.                     num += Math.sqrt(deltaX * deltaX + deltaY * deltaY)
  187.                 }    
  188.             }
  189.             coords.push(coords[-1])
  190.  
  191.             for(let i = 1; i < coords.length-3; i++)
  192.            {
  193.                let a = []
  194.                let b = []
  195.                let arrs = _SplineCoefficient(i, coords)   //считаем коэффициенты q
  196.  
  197.                for(let j = 0; j < num; j++)
  198.                {
  199.                    let points = []                          //создаём массив промежуточных точек
  200.                    let t = j / num                       // шаг интерполяции
  201.                                                    // передаём массиву точек значения по методу beta-spline
  202.                    points.push(arrs[0][0] + t * (arrs[0][1] + t * (arrs[0][2] + t * arrs[0][3])))
  203.                    points.push(arrs[1][0] + t * (arrs[1][1] + t * (arrs[1][2] + t * arrs[1][3])))
  204.  
  205.                    plot(points[0], points[1]);
  206.                }
  207.            }        
  208.        }          
  209.        //в функции рассчитываются коэффициенты a0-a3, b0-b3
  210.        function _SplineCoefficient(i, coords)
  211.        {    
  212.            let arrs = [[],[]]
  213.            //arrs.push([]);arrs.push([]);
  214.  
  215.            arrs[0].push(( coords[i - 1][0] + 4*coords[i][0] + coords[i + 1][0])/6)
  216.            arrs[0].push((-coords[i - 1][0] + coords[i + 1][0])/2)
  217.            arrs[0].push(( coords[i - 1][0] - 2*coords[i][0] + coords[i + 1][0])/2)
  218.            arrs[0].push((-coords[i - 1][0] + 3*coords[i][0] - 3*coords[i + 1][0] + coords[i + 2][0])/6)
  219.            arrs[1].push(( coords[i - 1][1] + 4*coords[i][1] + coords[i + 1][1])/6)
  220.            arrs[1].push((-coords[i - 1][1] + coords[i + 1][1])/2)
  221.            arrs[1].push(( coords[i - 1][1] - 2*coords[i][1] + coords[i + 1][1])/2)
  222.            arrs[1].push((-coords[i - 1][1] + 3*coords[i][1] - 3*coords[i + 1][1] + coords[i + 2][1])/6)
  223.  
  224.            return arrs
  225.        }
  226.  
  227.        //____________________________Отрисовка________________________________________________________________________________
  228.        drawСircle(600-55, 0+50, 40, color={r:255,g:255,b:0,a:255}, flag=1);
  229.        //солнце
  230.        for (let rad = 0; rad<=60; rad++)
  231.            drawLine(600-55, 50, Math.floor(60*Math.cos(rad)+600-55), Math.floor(60*Math.sin(rad)+50), {r:255,g:255,b:0,a:255});
  232.        //горы
  233.        drawPolygon([[0,600],[100,300],[150,500], [250, 200], [350, 500], [400, 300], [500, 600]]);
  234.        //трава
  235.        for(let i = 0; i<600; i+=1)
  236.            drawSpline([0+i*10,599, 10+i*10,592, 22+i*10,581, 24+i*10,570],color={r:0,g:255,b:0,a:255})
  237.        </script>
  238.     </body>
  239. </html>
  240.  
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!