تگ canvas در HTML

با تگ canvas در HTML آشنا شوید.

نکات اصلی آموزش تگ canvas در HTML

• عنصر <canvas> فضای طراحی با اندازه ثابت را فراهم می کند ، به توسعه دهندگان اجازه می دهد گرافیک HTML ایجاد کنند. اما ایجاد گرافیک با <canvas> معمولاً با استفاده از JavaScript انجام می شود.
• بوم ایجاد شده دارای اندازه پیش فرض 300px در 150px است.
• این آموزش <canvas> امکانات استفاده از این عنصر را ذکر می کند: ترکیب چندین عکس ، ترسیم نمودار ، تولید انیمیشن.

استفاده و هدف از تگ canvas

این آموزش تگ canvas در HTML توضیح می دهد <canvas> که منطقه ای از صفحه وب را تعریف می کند که به فضایی برای ارائه گرافیک های HTML تبدیل می شود. عنصر گرافیکی جایگزین HTML svg است.

به یاد داشته باشید: استفاده از تگ </canvas> ضروری است.

در مثال زیر ، فضای طراحی را تنظیم می کنیم:

<canvas id="canvas01" width="400" height="300" style="border: 1px solid #eee;"></canvas>

توجه: امکان دستکاری اندازه <canvas> با استفاده از صفات عرض و عرض HTML وجود دارد. آن ها صفاتی هستند که این عنصر قبول می کند.

<canvas> در HTML به توسعه دهندگان اجازه می دهد مستطیل ایجاد کنند. اشکال مختلف باید با جمع کردن یک یا چند مسیر ایجاد شود. این آموزش تگ canvas نحوه ترسیم مستطیل ها با سه عملکرد را توضیح می دهد:

• (fillRect (x ، y ،(عرض ، ارتفاع) – یک مستطیل پر شده ایجاد می کند.
• (strokeRect (x ، y ، (عرض ، ارتفاع) – یک طرح کلی مستطیل شکل ایجاد می کند.
• (clearRect (x ، y ، (عرض ، ارتفاع) – مستطیل را شفاف می کند.

هر سه عملکرد پارامترهای یکسانی را می پذیرند. x و y موقعیت روی بوم گوشه بالا سمت چپ مستطیل را نشان می دهد.

در این مثال در تگ canvas ، یک مستطیل پر شده ایجاد می کنیم:

<script>
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillRect(30, 30, 100, 100);
  }
}
</script>

مثال زیر <canvas> نحوه ایجاد یک طرح کلی مستطیل شکل را نشان می دهد:

<script>
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillRect(30, 30, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);

  }
}
</script>

ویژگی های canvas

width

ویژگی width عرض را بر روی پیکسل برای یک عنصر بوم تنظیم می کند. پیش فرض 300 پیکسل است.

<canvas id="canvas02" width="400" style="border: 1px solid #eee;"></canvas>

height

Height را بر اساس پیکسل برای یک عنصر بوم تنظیم می کند. پیش فرض 150 پیکسل است.

<canvas id="canvas03" height="300" style="border: 1px solid #eee;"></canvas>

پشتیبانی از مرورگر

این تگ در مرورگرهای : IE، safari ، firefox، cherom، opera  و Edge پشتیبانی می شود.

در دوره آموزش HTML بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.