Advertisement
fevzi02

3lab

Feb 6th, 2022
876
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 9.36 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мерный список координат многоугольника(треугольника);
  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