HTML Canvas Graphics

HTML Canvas چیست؟

تگ <canvas> در HTML یک ناحیه قابل رسم روی صفحه وب ایجاد می‌کند که می‌توان با جاوااسکریپت داخل آن گرافیک کشید.

ساختار پایه

<canvas id=“myCanvas” width=“400” height=“300” style=“border:1px solid #000000;”>

            مرورگر شما از تگ HTML5 canvas پشتیبانی نمی‌کند.

</canvas>

رسم با جاوااسکریپت

مثال ساده برای کشیدن یک مستطیل:

<script>

const canvas = document.getElementById(‘myCanvas’);

const ctx = canvas.getContext(‘2d’);

// تعیین رنگ پرکردن

ctx.fillStyle = ‘blue’;

// کشیدن مستطیل پر شده (مختصات x, y و عرض، ارتفاع)

ctx.fillRect(50, 50, 150, 100);

</script>

متدهای رایج برای رسم در Canvas

• fillRect(x, y, width, height) — مستطیل پر شده

• strokeRect(x, y, width, height) — فقط کادر مستطیل

• clearRect(x, y, width, height) — پاک کردن قسمتی از بوم

• beginPath(), moveTo(x, y), lineTo(x, y), stroke() — رسم خطوط و اشکال

• arc(x, y, radius, startAngle, endAngle) — رسم دایره یا کمان

مثال: کشیدن دایره

<script>

ctx.beginPath();

ctx.arc(200, 150, 50, 0, 2 * Math.PI); // x, y, شعاع، زاویه شروع و پایان

ctx.fillStyle = ‘red’;

ctx.fill();

ctx.stroke();

</script>