Advertisement
polpoteu

canvas

Oct 17th, 2020
2,064
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.58 KB | None | 0 0
  1. <document html>
  2. <head>
  3. </head>
  4. <body>
  5. <canvas id="domek" style="border: 1px solid;" width="1200"
  6. height="800">
  7. </canvas>
  8. <script>
  9. function rysujDomek() {
  10. // Pobierz element canvas i jego kontekst
  11. var canvas = document.getElementById('domek');
  12. var context = canvas.getContext('2d');
  13. // Rysuj „ścieżkę” zgodnie z podanymi współrzędnymi
  14. context.strokeStyle = '#000000';
  15. context.strokeRect(346, 248, 200, 205);
  16. context.strokeStyle = '#000000';
  17. context.fillStyle = '#339900';
  18. context.beginPath();
  19. context.moveTo(347, 247);
  20. context.lineTo(449, 175);
  21. context.stroke();
  22. context.closePath();
  23. context.strokeStyle = '#000000';
  24. context.beginPath();
  25. context.moveTo(449, 175);
  26. context.lineTo(546, 247);
  27. context.stroke();
  28. context.closePath();
  29. context.strokeStyle = '#000000';
  30. context.strokeRect(367, 275, 51, 47);
  31. context.strokeStyle = '#000000';
  32. //okno
  33. context.strokeRect(472, 277, 1, 0);
  34. context.strokeStyle = '#000000';
  35. //okno
  36. context.strokeRect(472, 277, 46, 44);
  37. context.strokeStyle = '#000000';
  38. //okno dolne
  39. context.strokeRect(472, 376, 46, 48);
  40. context.strokeStyle = '#000000';
  41. //drzwi
  42. context.strokeRect(369, 383, 42, 67);
  43. context.strokeStyle = '#000000';
  44. context.beginPath();
  45. context.moveTo(369, 423);
  46. context.lineTo(384, 422);
  47. context.stroke();
  48. context.closePath();
  49. context.strokeStyle = '#000000';
  50. context.beginPath();
  51. context.moveTo(367, 299);
  52. context.lineTo(417, 299);
  53. context.stroke();
  54. context.closePath();
  55. context.strokeStyle = '#200000';
  56. context.beginPath();
  57. context.moveTo(391, 275);
  58. context.lineTo(392, 319);
  59. context.stroke();
  60. context.closePath();
  61. context.strokeStyle = '#200000';
  62. context.beginPath();
  63. context.moveTo(493, 276);
  64. context.lineTo(493, 319);
  65. context.stroke();
  66. context.closePath();
  67. context.strokeStyle = '#200000';
  68. context.beginPath();
  69. context.moveTo(472, 299);
  70. context.lineTo(516, 299);
  71. context.stroke();
  72. context.closePath();
  73. context.strokeStyle = '#000000';
  74. context.beginPath();
  75. context.moveTo(497, 376);
  76. context.lineTo(497, 423);
  77. context.stroke();
  78. context.closePath();
  79. context.strokeStyle = '#000000';
  80. context.beginPath();
  81. context.moveTo(471, 400);
  82. context.lineTo(518, 400);
  83. context.stroke();
  84. context.closePath();
  85. context.strokeStyle = '#663300';
  86. context.strokeRect(477, 180, 20, 43);
  87. context.strokeStyle = '#000000';
  88.  
  89. context.save();
  90. context.translate(340, 56.5);
  91. context.scale(0.7586206896551724, 1);
  92. context.beginPath();
  93. context.arc(0, 0, 36, 0, 6.283185307179586, false);
  94. context.stroke();
  95. context.closePath();
  96. context.restore();
  97. }
  98. window.addEventListener("load", rysujDomek, true);
  99. </script>
  100.  
  101. </body>
  102. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement