API tools faq
paste
fevzi02

3я лаба

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