Advertisement
fevzi02

Untitled

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