٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش گرافیک بوم HTML

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

محمد یوسفی

1 جولای 2021

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

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

 

 

 

 

 


HTML Canvas چیست؟

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

این <canvas>عنصر فقط ظرفی برای گرافیک است. برای رسم واقعی گرافیک ها باید از JavaScript استفاده کنید.

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


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

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


نمونه های بوم

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

نشانه گذاری به این شکل است:

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

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

در اینجا مثالی از یک بوم اولیه و خالی آورده شده است:

مثال

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

JavaScript اضافه کنید

پس از ایجاد ناحیه بوم مستطیل ، باید JavaScript را برای انجام ترسیم اضافه کنید.

در اینجا چند نمونه آورده شده است:

یک خط بکش

مثال

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

متن سکته مغزی

 

 

 

مثال

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

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها