عنصر canvas در زبان نشانه گذاری HTML

عنصر canvas در زبان نشانه گذاری HTML

زمان مطالعه

5 دقیقه

تعداد بازدید

56

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب
سامان محمدپور
در مورد نویسنده : موفقیت بستگی به تلاش هر شخص داره، هممون ب همون اندازه که تلاش کردیم موفق شدیم.

عنصر canvas در زبان نشانه گذاری HTML

عنصر canvas در زبان نشانه گذاری HTML

زمان مطالعه

5 دقیقه

تعداد بازدید

56

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب

عنصر canvas برای ترسیم گرافیک در یک صفحه وب استفاده می شود.

عنصر canvas در زبان نشانه گذاری HTML برای ترسیم اشکال گرافیکی شناور از طریق زبان برنامه نویسی جاوااسکریپت (JavaScript) استفاده می شود

عنصر canvas فقط یک ظرف برای ترسیم گرافیک درون آن است. برای ترسیم گرافیک باید از زبان برنامه نویسی جاوااسکریپت (JavaScript) استفاده کنید.

این عنصر چندین روش برای افزودن کادرها، مسیرها، دایره ها و تصاویر دارد.

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

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

 

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

مثال های عنصر canvas

Canvas یا بوم یک ناحیه مستطیل شکل در یک صفحه است است که به طور پیش فرض بدون حاشیه است.

مثال: ایجاد یک canvas به شکل زیر است

 

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

 

 

همیشه برای عنصر canvas یک ویژگی id (برای انتخاب عنصر در جاوااسکریپت) و یک عرض و ارتفاع مشخص کنید . برای افزودن حاشیه به آن از ویژگی style استفاده کنید.

مثال: در زیر یک canvas خالی از شکل گرافیکی را مشاهده می کنید.

 


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

 

بوم یا canvas در HTML

 

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

پس از ایجاد کردن بوم (کادر مستطیل شکل) باید اشکال را با استفاده از زبان برنامه نویسی جاوااسکریپت (JavaScript) رسم کنید.

در ادامه چند مثال برای شما آورده ایم:

مثال: در زیر با استفاده از جاوااسکریپت یک خط رسم کرده ایم

 

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

 

رسم خط به وسیله canvas و جاوااسکریپت

 

مثال: در زیر با استفاده از جاوااسکریپت یک دایره رسم کرده ایم

 

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>

 

 

رسم دایره به وسیله canvas و جاوااسکریپت

 

مثال: در زیر با استفاده از جاوااسکریپت یک متن رسم کرده ایم

 

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

 

رسم متن به وسیله canvas و جاوااسکریپت

 

مثال: در زیر با استفاده از جاوااسکریپت یک متن با خط حاشیه (stroke) رسم کرده ایم

 

رسم متن حاشیه دار (stroke) به وسیله canvas و جاوااسکریپت

 

مثال: در زیر با استفاده از جاوااسکریپت یک پالت رنگ gradient رسم کرده ایم

<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>

 

رسم پالت رنگ به وسیله canvas و جاوااسکریپت

 

مثال: در زیر با استفاده از جاوااسکریپت یک پالت رنگ gradient رسم کرده ایم

 

<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>

 

رسم پالت رنگ به وسیله canvas و جاوااسکریپت

 

مثال: در زیر با استفاده از جاوااسکریپت یک عکس رسم کرده ایم

 

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

 

رسم عکس به وسیله canvas و جاوااسکریپت

 

 

در مقالات آینده در مجموعه ای به طور کامل به بررسی canvas می پردازیم.

خب به پایان یکی دیگر از مقالات HTML رسیدیم و اطلاعات کلی در مورد عنصر canvas زبان نشانه گذاری HTML کسب کردیم.

در مقاله بعدی به مبحث SVG در HTML می پردازیم.

سامان محمدپور
در مورد نویسنده : موفقیت بستگی به تلاش هر شخص داره، هممون ب همون اندازه که تلاش کردیم موفق شدیم.


پرسش و پاسخ
0
دوره پیشنهادی
دوره پیشنهادی