طراحی سایت | طراحی اسلایدر | خدمات سئو | سئو وبسایت | خدمات طراحی وبسایت | پشتیبانی وبسایت |
0 محصولات نمایش سبد خرید

هیچ محصولی در سبد خرید نیست.

اموزش تگ canvas در HTML

 برای ایجاد گرافیک در پرواز در یک سند HTML از تگ canvas استفاده می شود. این می تواند برای ارائه نمودار ، گرافیک بازی ، متن زیبا یا تصاویر دیگر استفاده شود. این برچسب خود یک بولین خالی را ارائه می دهد. برای ترسیم بولین، از برچسب <canvas> در کنار JavaScript (با استفاده از روش getContext ()) استفاده می شود. هر محتوا بین برچسبهای <canvas> </canvas> "محتوای برگشت ناپذیر" است - به این معنی که فقط در صورت نمایش بوم نمایش داده نمی شود.
ذهن انسان محدودیت نداره

تگ canvas

کاربرد تگ canvas در HTML

برای ایجاد گرافیک در پرواز در یک سند HTML از تگ canvas استفاده می شود. این می تواند برای ارائه نمودار ، گرافیک بازی ، متن زیبا یا تصاویر دیگر استفاده شود. این برچسب خود یک بولین خالی را ارائه می دهد. برای ترسیم بولین، از برچسب <canvas> در کنار JavaScript (با استفاده از روش getContext ()) استفاده می شود. هر محتوا بین برچسبهای <canvas> </canvas> “محتوای برگشت ناپذیر” است – به این معنی که فقط در صورت نمایش بوم نمایش داده نمی شود.

تگ <canvas> در HTML 5 معرفی شد.

Syntax

طریقه نوشتن تگ canvas در HTML

به صورت <canvas id = ""> </canvas> نوشته میشود و هر محتوای برگشتی درج شده بین برچسب شروع و پایان قرار دارد. این محتوای برگشت فقط در صورت نمایش مرورگر از عنصر <canvas> نمایش داده می شود. همچنین می توانید ارتفاع و عرض بوم را به ترتیب با استفاده از ویژگی های ارتفاع و عرض مشخص کنید. اگر از این خصوصیات استفاده نکنید ، بوم در اندازه پیش فرض ارائه می شود ، که عرض آن ۳۰۰ و ارتفاع ۱۵۰ است. برای اینکه <canvas> در واقع چیزی را نمایش دهد ، باید ویژگی شناسه را اضافه کنید و شناسه <canvas> را با برخی JavaScript مرجع کنید.

<canvas id="myCanvas">
Fallback content...
</canvas>

<script>
function displayCanvas()
	{
      var canvas = document.getElementById("myCanvas");
...
</script>

مثال ها

شکل ها

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="Rectangles" width="300" height="200">
      <p>Your browser does not support the canvas tag.</p>
      <p>
        Here's an
        <a href="/pix/html_5/tags/html_canvas_tag.gif"
          >image of what it's supposed to look like</a
        >.
      </p>
    </canvas>
    <script>
      var canvasRect = document.getElementById("Rectangles");
      if (canvasRect.getContext) {
        var ctxRect = canvasRect.getContext("2d");

        ctxRect.fillStyle = "rgb(200,0,0)";
        ctxRect.fillRect(0, 0, 150, 75);

        ctxRect.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctxRect.fillRect(40, 30, 125, 75);

        ctxRect.fillStyle = "rgb(0,0,150)";
        ctxRect.strokeRect(20, 20, 50, 100);
      }
    </script>
  </body>
</html>

منحنی ها در HTML

همچنین می توانید از تگ canvas برای ترسیم منحنی های Bzzier استفاده کنید. برای این کار از bezierCurveTo که مشابه بسته های ابزار bezier و path در بسته های ترسیم رایانه ای مانند Adobe Illustrator ، GIMP و موارد دیگر است ، استفاده کنید.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="Path"
      ><p>Your browser does not support the canvas tag.</p></canvas
    >
    <script>
      var canvasPath = document.getElementById("Path");
      if (canvasPath.getContext) {
        var ctxPath = canvasPath.getContext("2d");

        ctxPath.beginPath();
        ctxPath.moveTo(150, 130);
        ctxPath.bezierCurveTo(90, 100, 40, 75, 160, 15);
        ctxPath.bezierCurveTo(130, 50, 110, 75, 150, 130);

        ctxPath.closePath();
        ctxPath.lineWidth = 1;
        ctxPath.strokeStyle = "#f90";
        ctxPath.stroke();
      }
    </script>
  </body>
</html>

متن

در اینجا مثالی از استفاده از عنصر <canvas> برای ترسیم متن استفاده شده است.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="Text"
      ><p>Your browser does not support the canvas tag.</p></canvas
    >
    <script>
      var canvasText = document.getElementById("Text");
      if (canvasText.getContext) {
        var ctxText = canvasText.getContext("2d");
        var text = "Canvas";
        ctxText.font = "60pt Cursive";
        ctxText.fillStyle = "#fc0";
        ctxText.strokeStyle = "#f90";
        ctxText.fillText(text, 3, 62);
        ctxText.strokeText(text, 1, 60);
      }
    </script>
  </body>
</html>

تصاویر

حتی می توانید از عنصر <canvas> برای ترسیم یک تصویر استفاده کنید. برای ترسیم یک تصویر ، از روش DrawImage () استفاده کنید. این امر مستلزم تهیه URL یک تصویر است.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="Image"
      ><p>Your browser does not support the canvas tag.</p></canvas
    >
    <script>
      var canvasImage = document.getElementById("Image");
      if (canvasImage.getContext) {
        var ctxImage = canvasImage.getContext("2d");
        var imageObj = new Image();

        imageObj.onload = function () {
          ctxImage.drawImage(imageObj, 10, 10);
        };
        imageObj.src = "{your url}";
      }
    </script>
  </body>
</html>

ویژگی

ویژگی ها را می توان به عنصر HTML اضافه کرد تا اطلاعات بیشتری درباره نحوه ظاهر یا رفتار آن عنصر ارائه دهد. تگ <canvas> صفات زیر را می پذیرد.

Attributeتوضیحات
widthعرض بولین را در پیکسل ها مشخص می کند. مقدار پیش فرض ۳۰۰ است. مقادیر ممکن: [عدد صحیح غیر منفی] (برای مثال ۳۰۰)
heightارتفاع بولین را در پیکسل ها مشخص می کند. مقدار پیش فرض ۱۵۰ است. مقادیر ممکن: [عدد صحیح منفی] (برای مثال ۱۵۰)
دیدگاه‌های نوشته

Share via
ارسال این به یک دوست