??? ? ????? ???? ?? HTML5 Canvas API? ???? ??

HTML5 Canvas API? ? ???? ??? ?? ???? ?????? ?? ??? ??? ??? ?????. ?? ? ?????? ??? ?? ?????. ??? ????? ?????.

1. ??? ?? : HTML ???? <canvas></canvas> ??? ??? ?????. ? ??? ??? ?? ??????. JavaScript? ???? ??? ? ? ??? ID? ???????.

 <code class="html">   <title>Canvas Example</title>   <canvas id="myCanvas" width="500" height="300"></canvas> <script src="script.js"></script>  </code>

2. 2D ??? ???? ?? : JavaScript ?? (? : script.js )?? Canvas ??? ????? 2D ??? ????? ?????. ? ????? ???? ??? ??? ?????.

 <code class="javascript">const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d');</code>

3. ?? ?? ? ?? : ctx ??? ??? ??? ??? ??? ??? ?????.

• fillRect(x, y, width, height) : ??? ???? ????.
• strokeRect(x, y, width, height) : ??? ??? ????.
• arc(x, y, radius, startAngle, endAngle, counterclockwise) : ?? ?? ?? ????.
• beginPath() , moveTo(x, y) , lineTo(x, y) , closePath() , stroke() , fill() : ??? ?? ?? ??? ?????. beginPath() ? ??? ???? moveTo() ???? ???? lineTo() ? ?? ????, closePath() ??? ?? stroke() ? fill() ?? ???? ???? ?????.

4. ??? ?? : ??? ?? ??? ???? ??? ??? ??? ?? ? ? ????.

• fillStyle : ??? ??? ????? (? : ctx.fillStyle = 'red'; ).
• strokeStyle : ???? ??? ????? (? : ctx.strokeStyle = 'blue'; ).
• lineWidth : ???? ??? ????? (? : ctx.lineWidth = 5; ).
• font : ??? ? ??? ????? (? : ctx.font = '30px Arial'; ).

5. ????? : ?????? ????? requestAnimationFrame() ???? ?? ??? ???? ????? ?? ????? ?????. ? ??? ???? ????? ?? ?? ??? ????? ??????.

 <code class="javascript">function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas // Your drawing code here requestAnimationFrame(animate); } animate();</code>

HTML5 Canvas API? ??? ? ??? ????? ???? ??? ??????

??? ??? ????? ?? ???? ?????? ?? ?, ?? ??? ???? ?????. ?? ??? ??? ????.

• ?? ??? ??? : ?? ????? ??? ??? ?? ????? ????. ??? ?? ? ?? ?????. ??? ?? ? ???? clearRect() ??? ??????.
• drawImage() ????? ?????? : ??? ???? ?? ?????? drawImage() ???? ???? ????? ?????. drawImage() ??? ???? ???? ?? ??? ????? ??? ??? ?????.
• ?? ??? ??? : ??? ????? ?? ??? ?? ?? ??? ??? ?? ?? ??? ???? ????. ?? ?? ?? ??? ? ???? ?? ???? ????. ????? ?? ????? ?? ? ????? ?? ???.
• ??? ??? : ???? ? ???? ???? ???? ???? ??? ???? ?? ?? ctx.imageSmoothingEnabled = false; ?? ?? ??? ???? ??? ?? ???? ? ????.
• ??? ?? ?? ????? : ??? ?? ??? ??? ??????. ?? ??, ?? fillRect() ??? ??? ?? ?? ???? ????. beginPath() , moveTo() , lineTo() ?? ?? ??? ?? ??? ??? ?????. ??? ????? ??????.
• ??? ?? : ?? ?? ??? ???? ?? ?? ???? (? : ?? ??)? ?? ???? ??? ??? ???? ?? ?? ?? ???? ?? ?? ???? ?? ?? ????.
• ?? : ??? ?? ???? ?? ?? ??? ??? ?? ??? ????.
• ???? ? : ????? ??? ??? ???? ??? ????? ?? ?? ??? ??????. ?? ?? ??? ??? ??? ?????.

HTML5 ??? API? ???? ??? ??? ??? ??? ??? ?????

HTML5 Canvas API ??? ??? ?? ??? ?? ???? ????. ??? ??, ??? ??? ? ?? ??? ??? ????? ??? ???? ???????. ??? ??? ????.

• ??? ??? : ??? ???? ??? ??? ???? ??? ??? ?????. ???? ??? ??? ????.

  • mousedown : ??? ??? ??? ??????.
  • mouseup : ??? ??? ?? ? ? ????????.
  • mousemove : ???? ??? ? ????????.
  • click : ???? ???? ????????.
  • touchstart , touchmove , touchend : ?? ?? ?.
• ??? ?? : ??? ??? ??? event.offsetX ? event.offsetY ???? ???? ???? ??? ???????. ?? ??? ??? ???? ???? ?? ?? ? ???? ?? ??? ?????. ???? ????? ??? ?? ???? ??? ??? ???? ???? ?? ?????.
• ?:

 <code class="javascript">canvas.addEventListener('mousedown', (event) => { const x = event.offsetX; const y = event.offsetY; // Check if (x, y) is within a specific shape if (/* condition to check if (x, y) is inside a shape */) { // Handle the interaction (eg, change color, move object) } });</code>

• ?? ?? : ???? ?? ?? ?? ?? ??? ?? ?? ?? ?? ??? ????? ??? ????? ?? ?? ????? ?????. ? ????? ??? ?? ???? (? : ??? ??? ?? ?, ? ??? ?? ?? ??)? ?? ????.
• ?? ?? : ??? ?? ??? ??? ? ???? ??????? ??? ?? (? : ??, ??, ??? ??)? ??? ???????.

?? HTML5 ??? ?? ? ?? ??? ???? ? ?? ??? ???? ??????

?? HTML5 ??? ?? ? ?? ??? ?????? ? ?? ??? ???? ????.

• MDN ? ?? : Canvas API? ?? Mozilla Developer Network? ??? ????? ??? ? ????. ?? ??? ?? ?? ??? ????.
• ? : ??? ?? ????? ?? ??? ????? HTML5 Canvas API? ??? ????. "HTML5 ???"?? "JavaScript ?? ??"? ?? ?? ???? ?? ???? ?????.
• ??? ?? : Udemy, Coursera ? Codecademy? ?? ???? HTML5 Canvas API ? ?? ?? ?? ??? ?????. ? ??? ?? ??? ? ?? ??? ?? ????? ?????.
• ???? ? ??? ??? : ??? ? ??? ? ????? ?? ??? ??, ?? ??? ? ?? ??? ?? ??? ? ??? ????. "HTML5 ??? ???", "??? ?? ??"?? "?? ??? ??"? ?? ??? ???? ?? ???? ?????.
• ?? ?? ???? : HTML5 Canvas API? ???? ?? ?? ????? ?? ??? ???? ?? ??? ?? ??? ? ? ????. ?? ? ???? API? ???? ??? ????? GitHub ?? ?? ??? ???? ????? ??????.
• ?? ?? ??? ?? : Phaser ? Pixijs? ?? ??? ??? ??? API (?? WebGL)? ???? ?? ??? ??????. ??? ??? ??? ???? ???? ??? ?? ??? ?? ? ? ????. ??? ?? ??? ?? ?? ? ??? ??????.

HTML5 ??? API? ????? ? ??? ??? ??? ?????. ???? ???? ?? ??? ???? ????? ? ??? ????? ?????.

? ??? ??? ? ?????? ??? ? HTML5 Canvas API? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!