گرافیک با Canvas در HTML

عنصر <canvas> در HTML برای ترسیم گرافیک روی یک صفحه وب استفاده می‌شود. گرافیک سمت چپ با <canvas> ایجاد شده است. این گرافیک چهار عنصر را نشان می‌دهد: یک مستطیل قرمز، یک مستطیل گرادیان (طیف رنگ)، یک مستطیل چندرنگ و یک متن چندرنگ.

HTML Canvas چیست؟

عنصر <canvas> در HTML برای ترسیم گرافیک، به صورت پویا (on the fly)، از طریق جاوااسکریپت استفاده می‌شود. عنصر <canvas> فقط یک محفظه (container) برای گرافیک است. شما باید از جاوااسکریپت برای ترسیم واقعی گرافیک استفاده کنید.

Canvas متدهای مختلفی برای ترسیم مسیرها، جعبه‌ها، دایره‌ها، متن و افزودن تصاویر دارد.

Canvas توسط تمام مرورگرهای اصلی پشتیبانی می‌شود

مثال‌های Canvas

یک canvas یک ناحیه مستطیلی در یک صفحه HTML است. به طور پیش‌فرض، canvas هیچ حاشیه و محتوایی ندارد. کد آن به این شکل است:

<canvas id="myCanvas" width="200" height="100"></canvas>

نکته: همیشه یک ویژگی id (تا در اسکریپت به آن ارجاع شود)، و ویژگی‌های width و height را برای تعریف اندازه canvas مشخص کنید. برای افزودن حاشیه، از ویژگی style استفاده کنید. در اینجا یک مثال از یک canvas ساده و خالی آمده است:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

اضافه کردن یک جاوااسکریپت

پس از ایجاد ناحیه مستطیلی canvas، باید یک جاوااسکریپت برای انجام ترسیم اضافه کنید. در اینجا چند مثال آورده شده است:

ترسیم یک خط

مثال

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.moveTo(0, 0);
  ctx.lineTo(200, 100);
  ctx.stroke();
</script>

ترسیم یک دایره

مثال

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(95, 50, 40, 0, 2 * Math.PI);
  ctx.stroke();
</script>

ترسیم یک متن

مثال

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.font = "30px Arial";
  ctx.fillText("Hello World", 10, 50);
</script>

ترسیم متن توخالی (Stroke Text)

مثال

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.font = "30px Arial";
  ctx.strokeText("Hello World", 10, 50);
</script>

ترسیم گرادیان خطی

مثال

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");

  // Create gradient
  var grd = ctx.createLinearGradient(0, 0, 200, 0);
  grd.addColorStop(0, "red");
  grd.addColorStop(1, "white");

  // Fill with gradient
  ctx.fillStyle = grd;
  ctx.fillRect(10, 10, 150, 80);
</script>

ترسیم گرادیان دایره‌ای

مثال

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");

  // Create gradient
  var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
  grd.addColorStop(0, "red");
  grd.addColorStop(1, "white");

  // Fill with gradient
  ctx.fillStyle = grd;
  ctx.fillRect(10, 10, 150, 80);
</script>

ترسیم تصویر

مثال

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 10, 10);
</script>

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); </script>

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); </script>