JavaScript?? Canvas API ??

JavaScript? Canvas API? ???, ????? ? ?? ??? ??? ????? ?? ?? ? ?? ??? ?????. ??? ???? ??, ??? ???, ??? ??? ??? ? ????? ??? ??????? ?? ? ?? ??? ?? ??? ?????.

---

1. ???? ??

??? ???? ???? ??? ???. ?? ???? JavaScript? ???? ?? 2D ??? ???? ?? 3D ???? WebGL ????? ????? ???.

?? ??:

<canvas>




<hr>

<h3>
  
  
  <strong>2. Accessing the Canvas Context</strong>
</h3>

<p>To draw on the canvas, obtain the rendering context:<br>
</p>

<pre class="brush:php;toolbar:false">const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d"); // 2D rendering context

---

3. ???? ?? ???

???? ???:

• fillRect(x, y, width, height): ??? ????? ????.
• StrokeRect(x, y, width, height): ???? ???? ????.
• clearRect(x, y, width, height): ?? ??? ????.

?:

ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 150, 100);

ctx.strokeStyle = "red";
ctx.strokeRect(50, 50, 150, 100);

ctx.clearRect(70, 70, 50, 50);

?? ???:

beginPath(), moveTo(x, y), lineTo(x, y) ? closePath()? ?????. .

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 50);
ctx.lineTo(300, 100);
ctx.closePath();

ctx.fillStyle = "green";
ctx.fill();

ctx.strokeStyle = "black";
ctx.stroke();

---

4. ?? ? ??? ??

??? ? ???? ???:

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

????? ??:

const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "red");

ctx.fillStyle = gradient;
ctx.fillRect(50, 50, 200, 100);

---

5. ??? ???

???? ???? ????? ?? ??? ?????.

• fillText(text, x, y): ??? ???? ??????.
• StrokeText(text, x, y): ??? ???? ??????.

?:

ctx.font = "20px Arial";
ctx.fillStyle = "purple";
ctx.fillText("Hello Canvas!", 100, 100);

ctx.strokeStyle = "black";
ctx.strokeText("Hello Canvas!", 100, 100);

---

6. ???? ??? ??

drawImage() ???? ???? ???? ?????.

const img = new Image();
img.src = "path-to-image.jpg";

img.onload = () => {
  ctx.drawImage(img, 50, 50, 200, 100); // (image, x, y, width, height)
};

---

7. ?? ? ??

??:

ctx.scale(2, 2); // Doubles the size of shapes
ctx.fillRect(10, 10, 50, 50);

??:

ctx.rotate((Math.PI / 180) * 45); // Rotate 45 degrees
ctx.fillRect(100, 100, 50, 50);

??:

ctx.translate(50, 50); // Moves the canvas origin
ctx.fillRect(0, 0, 50, 50);

---

8. Canvas API? ??? ?????

???? ?????? ???? requestAnimationFrame ??? ?????.

?: ?? ?? ?????:

<canvas>




<hr>

<h3>
  
  
  <strong>2. Accessing the Canvas Context</strong>
</h3>

<p>To draw on the canvas, obtain the rendering context:<br>
</p>

<pre class="brush:php;toolbar:false">const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d"); // 2D rendering context

---

9. ??? ???? ??

??? API? ??? ??, ??? ?? ??? ????? ??? ? ????.

?: ???? ???? ???:

ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 150, 100);

ctx.strokeStyle = "red";
ctx.strokeRect(50, 50, 150, 100);

ctx.clearRect(70, 70, 50, 50);

---

10. ???? ???

??? API? ?? ?? ?????? ?????. ? ???? ?? ?? ????? ?? ?? ??? ???? ?? ?????.

---

11. ?? ??

1. ?? ???: ????? ??? ??? ??? ????.
2. ??? ???: ?? DPI ???? ??? ???? ?? window.devicePixelRatio? ?????.
3. ??: ??? ?? ???? ?????. ???? ?? ????? ?????.

---

??

JavaScript? Canvas API? ??? ??? ? ???? ??? ?? ??? ?????. ???? ? ??? ??????? ?????, ?? ? ??? ???? ?? ??? ???? ? ? ????.

?????. ?? Abhay Singh Kathayat???!
?? ?????? ??? ?? ??? ?? ?? ??? ?? ??? ??????. ?? ????? ?? ???? ??? ???? ??????? ???? ?? ??? ????? ??? ?????? ???? ?????.
? ???? ???(kaashshorts28@gmail.com)? ???? ?????.

? ??? Canvas API? ??? ??: ?? ? ???? ?? ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!