خانه آموزش HTML آموزش تگ های HTML آموزش تگ canvas در HTML

آموزش تگ canvas در HTML

توسط

۱۳۹۷-۱۲-۰۹

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

آموزش تگ canvas در HTML

Free-Learn

تگ Canvas در HTML

تگ canvas تگی است در واقع همانند یک ظرف برای نگهداری اشکال گرافیکی ، که این اشکال گرافیکی معمولا توسط اسکریپت ها (جاوا اسکریپت) ایجاد می شوند.

Free-Learn

مثال از تگ canvas در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

<body>

<canvas id="mycanvas">
شرمنده مثه اینکه مرورگر شما از این تگ پشتیبانی نمیکند
</canvas>

<script>
var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#CDDC39";
ctx.fillRect(0, 0, 80, 80);
</script>

</body>

<body>

شرمنده مثه اینکه مرورگر شما از این تگ پشتیبانی نمیکند

</canvas>

var c = document.getElementById("mycanvas");

var ctx = c.getContext("2d");

ctx.fillStyle = "#CDDC39";

ctx.fillRect(0, 0, 80, 80);

</script>

</body>

امتحان کنید

مثال شماره ۲ : نمایش متن درون تگ Canvas

<body>

<canvas id="myCanvas" width="200" height="120" style="border:1px solid #d3d3d3;">
شرمنده مثه اینکه مرورگر شما از این تگ پشتیبانی نمیکند
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.font="30px Comic Sans MS";
ctx.fillStyle = "green";
ctx.textAlign = "center";
ctx.fillText("Free-Learn", canvas.width/2, canvas.height/2);
</script>

</body>

<body>

شرمنده مثه اینکه مرورگر شما از این تگ پشتیبانی نمیکند

</canvas>

var canvas = document.getElementById("myCanvas");

var ctx=canvas.getContext("2d");

ctx.font="30px Comic Sans MS";

ctx.fillStyle = "green";

ctx.textAlign = "center";

ctx.fillText("Free-Learn", canvas.width/2, canvas.height/2);

</script>

</body>

امتحان کنید

مثال شماره ۳ : نمایش عکس درون تگ Canvas : در مثال زیر اول یک تصویر (عکس) با استفاده از تگ img در صفحه قرار دادم سپس کاری کردم که با کلیک بروی دکمه اون عکس درون ظرف (Canvas) نمایش داده شود.

نکته ای که در مثال زیر است اینه که بنده با استفاده از دستورات CSS عکس رو مخفی کردم که در حالت عادی در صفحه نمایش داده نشود.

<body>

<canvas id="mycanvas" width="320" height="200" style="border:3px solid #d3d3d3;">
شرمنده مثه اینکه مرورگر شما از این تگ پشتیبانی نمیکند
</canvas>

<button type="button" onclick="myimg()">برای نمایش عکس درون کنویس کلیک کنید</button>

<script>
function myimg() {
    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("myimage");
   ctx.drawImage(img, 5, 5);
}
</script>

</body>

<body>

شرمنده مثه اینکه مرورگر شما از این تگ پشتیبانی نمیکند

</canvas>

<button type="button" onclick="myimg()">برای نمایش عکس درون کنویس کلیک کنید</button>

function myimg() {

var canvas = document.getElementById("mycanvas");

var ctx = canvas.getContext("2d");

var img = document.getElementById("myimage");

ctx.drawImage(img, 5, 5);

}

</script>

</body>

امتحان کنید

Free-Learn

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

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ canvas در HTML پشتیبانی میکنند یا خیر.

نام مرورگر	Chrome	Firefox	Opera	Safari	IE
پشتیبانی	۴٫۰	۲٫۰	۹٫۰	۳٫۱	۹٫۰

Free-Learn

جدول صفات تگ canvas در HTML

در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.

نام صفت	مقدار	توضیح
height	pixels	برای مشخص کردن اندازه ارتفاع Canvas
width	pixels	برای مشخص کردن اندازه عرض Canvas

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

تگ canvas از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

Free-Learn

نکات و توضیحات

تگ canvas یک تگ جدید/اضافه شده در HTML5 می باشد.

هر متنی که درون تگ canvas قرار بگیرد، در صورتی که مرورگرها از این تگ پشتیبانی نکنند آن متن به کاربر نمایش داده می شود و کاربر میتواند متوجه شود که مرورگرش از تگ canvas پشتیبانی نمیکند.

Free-Learn

دستورات CSS پیش فرض

معمولا مرورگرها تگ canvas را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.

canvas {
  height: 150px;
  width: 300px;
}

canvas {

height: 150px;

width: 300px;

}