fevzi02

3я лаба

Feb 5th, 2022 (edited)
262
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 9.52 KB | None | 0 0
  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мерный список координат многоугольника(треугольника); flag - отвечает за заливку
  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.            if(flag)
  160.            {
  161.  
  162.            }  
  163.            else
  164.            {
  165.                for(let i = 0; i<coords.length;i++)
  166.                {
  167.                    drawLine(coords[i][0], coords[i][1], coords[(i+1)%coords.length][0], coords[(i+1)%coords.length][1], color);
  168.                }
  169.            }
  170.        }
  171.        //-------------------------------------Отрисовка В-Сплайна-------------------------------------------------------------
  172.        function drawSpline(args, color)
  173.        {
  174.            if(color)  
  175.                plot.color = color;
  176.             else
  177.                plot.color = {r:0,g:0,b:0,a:255};
  178.            
  179.  
  180.            let coords = [[args[0], args[1]]];
  181.            let num = 0;
  182.            let deltaX;
  183.            let deltaY;
  184.  
  185.            for(let i = 0; i<args.length; i+=2)
  186.            {
  187.                coords.push([args[i], args[i+1]])
  188.                if (i > 0)
  189.                 {
  190.                     deltaX = coords[Math.floor(i/2+1)][0] - coords[Math.floor(i/2)][0]
  191.                     deltaY = coords[Math.floor(i/2+1)][1] - coords[Math.floor(i/2)][1]
  192.                     num += Math.sqrt(deltaX * deltaX + deltaY * deltaY)
  193.                 }    
  194.             }
  195.             coords.push(coords[-1])
  196.  
  197.             for(let i = 1; i < coords.length-3; i++)
  198.            {
  199.                let a = []
  200.                let b = []
  201.                let arrs = _SplineCoefficient(i, coords)   //считаем коэффициенты q
  202.  
  203.                for(let j = 0; j < num; j++)
  204.                {
  205.                    let points = []                          //создаём массив промежуточных точек
  206.                    let t = j / num                       // шаг интерполяции
  207.                                                    // передаём массиву точек значения по методу beta-spline
  208.                    points.push(arrs[0][0] + t * (arrs[0][1] + t * (arrs[0][2] + t * arrs[0][3])))
  209.                    points.push(arrs[1][0] + t * (arrs[1][1] + t * (arrs[1][2] + t * arrs[1][3])))
  210.  
  211.                    plot(points[0], points[1]);
  212.                }
  213.            }        
  214.        }          
  215.        //в функции рассчитываются коэффициенты a0-a3, b0-b3
  216.        function _SplineCoefficient(i, coords)
  217.        {    
  218.            let arrs = [[],[]]
  219.            //arrs.push([]);arrs.push([]);
  220.  
  221.            arrs[0].push(( coords[i - 1][0] + 4*coords[i][0] + coords[i + 1][0])/6)
  222.            arrs[0].push((-coords[i - 1][0] + coords[i + 1][0])/2)
  223.            arrs[0].push(( coords[i - 1][0] - 2*coords[i][0] + coords[i + 1][0])/2)
  224.            arrs[0].push((-coords[i - 1][0] + 3*coords[i][0] - 3*coords[i + 1][0] + coords[i + 2][0])/6)
  225.            arrs[1].push(( coords[i - 1][1] + 4*coords[i][1] + coords[i + 1][1])/6)
  226.            arrs[1].push((-coords[i - 1][1] + coords[i + 1][1])/2)
  227.            arrs[1].push(( coords[i - 1][1] - 2*coords[i][1] + coords[i + 1][1])/2)
  228.            arrs[1].push((-coords[i - 1][1] + 3*coords[i][1] - 3*coords[i + 1][1] + coords[i + 2][1])/6)
  229.  
  230.            return arrs
  231.        }
  232.  
  233.        //____________________________Отрисовка________________________________________________________________________________
  234.        drawСircle(600-55, 0+50, 40, color={r:255,g:255,b:0,a:255}, flag=1);
  235.        //солнце
  236.        for (let rad = 0; rad<=60; rad++)
  237.            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});
  238.        //горы
  239.        drawPolygon([[0,600],[100,300],[150,500], [250, 200], [350, 500], [400, 300], [500, 600]]);
  240.        //трава
  241.        for(let i = 0; i<600; i+=1)
  242.            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})
  243.        </script>
  244.     </body>
  245. </html>
  246.  
Add Comment
Please, Sign In to add comment