بهترین سایت برای توسعه دهندگان وب

دروس HTML5

شروع HTML مقدمه HTML ویرایشگران HTML مثالهای اساسی HTML المان های HTML ویژگی های HTML عناوین HTML بندهای HTML سبک های HTML قالب بندی HTML نقل قول های HTML نظرات HTML رنگهای HTML HTML و CSS پیوندهای HTML تصاویر HTML جداول HTML لیست های HTML بلوک های HTML کلاس های HTML شناسه های HTML فریم های HTML HTML و JavaScript مسیرهای پرونده HTML HTML قسمت هدینگ چیدمان های HTML HTML پاسخگو کد رایانه HTML موجودیت HTML نمادهای HTML رمزگذاری HTML رمزگذاری URL HTML HTML و XHTML

HTML فرم ها

فرم های HTML المان های فرم HTML انواع ورودی HTML صفات ورودی HTML

HTML5

مقدمه HTML5 پشتیبانی HTML5 المان های جدید HTML5 المان های معنایی HTML5 مهاجرت از HTML4 راهنمای سبک HTML5

HTML گرافیک

HTML Canvas HTML SVG

HTML رسانه

HTML ویدیوی HTML صوت HTML افزونه های HTML یوتیوب HTML

HTML API

مکان جغرافیایی HTML کشیدن / رها کردن HTML HTML ذخیره وب HTML کارهای وب HTML و SSE

HTML مثال

مثالهای HTML آزمون ها HTML تمرینات HTML گواهی HTML خلاصه HTML قابلیت دسترسی به HTML

HTML منابع

لیست برچسب های HTML صفات HTML صفات جهانی HTML رویدادهای HTML رنگهای HTML کانواس HTML صوتی / تصویری HTML نسخه معتبر HTML مجموعه نویسه های HTML رمزگذاری URL HTML رمزگذاری زبان HTML پیام های HTTP روشهای HTTP مبدل PX به EM میانبرهای صفحه کلید

HTML5 درسهایی برای مبتدیان

بوم HTML5 Canvas


مرورگر شما از این عنصر پشتیبانی نمی کند <canvas>.

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

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


HTML Canvas چیست؟

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

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

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


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

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

عنصر
<canvas> 4.0 9.0 2.0 3.1 9.0

نمونه های بوم 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 را برای انجام ترسیم اضافه کنید.

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

یک خط بکش

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

مثال

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
خودتان آزمایش کنید »

یک دایره بکشید

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

مثال

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
خودتان آزمایش کنید »

رسم متن

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

مثال

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
خودتان آزمایش کنید »

متن مشخص شده

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

مثال

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
خودتان آزمایش کنید »

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

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

مثال

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

// ایجاد شیب
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// با شیب پر کنید
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
خودتان آزمایش کنید »

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

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

مثال

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

// ایجاد شیب
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// با شیب پر کنید
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
خودتان آزمایش کنید »

رسم تصویر

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
خودتان آزمایش کنید »

آموزش HTML بوم

برای کسب اطلاعات بیشتر در مورد <canvas> ، لطفاً آموزش HTML Canvas ما را بخوانید. .





این سایت برای آموزش ، آزمایش و یادگیری بهینه شده است. نمونه ها را می توان برای بهبود ساده کرد خواندن و درک اساسی. آموزشها ، پیوندها و مثالها مرتباً تجدید نظر می شوند تا از آنها جلوگیری شود خطاها ، اما ما نمی توانیم صحت و عملکرد کامل همه مطالب را تضمین کنیم. با استفاده از این سایت ، شما موافقت می کنید که مطالعه کرده اید و پذیرفته ایدمقررات استفاده , کوکی و سیاست های حفظ حریم خصوصی. کپی رایت 1999-2020 حق چاپ و .. محفوظ توسط احمد فرجی
سایت توسط چارچوب farsiw3.ir طراحی شده است.

Farsiw3.ir