Advertisement
fevzi02

гирич

Mar 31st, 2022
77
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.39 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: #5f636b
  16. }
  17.  
  18. canvas
  19. {
  20. display: block;
  21. margin: auto auto;
  22. border: 1px solid #04112F;
  23. background: #9ce8ff;
  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,400],[150,500], [250, 200], [350, 500], [400, 300], [500, 550], [550, 500], [600, 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