HTML5 Canvas

HTML5 Canvas  چیست ؟

آموزش گرافیک  html  درس اول

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

HTML Canvas چیست؟

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

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

canvas دارای چندین روش برای رسم مسیرها، جعبه ها، حلقه ها، متن ها و اضافه کردن تصاویر است.

HTML5 Canvas
HTML5 Canvas

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

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

chrome:  ۴.۰

IE: 9.0

firefox : 2.0

safari : 3.1

opera :9.0

نمونه های canvas

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

نشانه گذاری  به شرح زیر است:

 &lt;canvas id="myCanvas" width="200" height="100"&gt;&lt;/canvas&gt; 

 

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

یک  canvas  خالی :

مثال :

 &lt;canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"&gt;
&lt;/canvas&gt; 

کشیدن یک خط :

مثال:

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");

// 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); 

کشیدن یک شیب دایره ای ( دایره با رنگ پر رنگ و کم کم اطراف آن کم رنگ تر می شود ) :

مثال :

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

کشیدن تصویر :

مثال :

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

 

حتما بخوانید:  پشتیبانی مرورگر html5
امتیاز کاربران به این مطلب
۱ نفر - میانگین: ۵
تلگرام

دیدگاه‌تان را ثبت کنید:

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

5 × سه =

PHN0eWxlPi5oX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWV7cG9zaXRpb246cmVsYXRpdmU7fSAuaF9pZnJhbWUtYXBhcmF0X2VtYmVkX2ZyYW1lIC5yYXRpbyB7ZGlzcGxheTpibG9jazt3aWR0aDoxMDAlO2hlaWdodDphdXRvO30gLmhfaWZyYW1lLWFwYXJhdF9lbWJlZF9mcmFtZSBpZnJhbWUge3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO2xlZnQ6MDt3aWR0aDoxMDAlOyBoZWlnaHQ6MTAwJTt9PC9zdHlsZT48ZGl2IGNsYXNzPSJoX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWUiPiA8c3BhbiBzdHlsZT0iZGlzcGxheTogYmxvY2s7cGFkZGluZy10b3A6IDU3JSI+PC9zcGFuPjxpZnJhbWUgc3JjPSJodHRwczovL3d3dy5hcGFyYXQuY29tL3ZpZGVvL3ZpZGVvL2VtYmVkL3ZpZGVvaGFzaC85dHk0VS92dC9mcmFtZSIgYWxsb3dGdWxsU2NyZWVuPSJ0cnVlIiB3ZWJraXRhbGxvd2Z1bGxzY3JlZW49InRydWUiIG1vemFsbG93ZnVsbHNjcmVlbj0idHJ1ZSIgPjwvaWZyYW1lPjwvZGl2Pg==
با سپاس از ثبت دیدگاه شما دوست عزیز
از تماشای این ویدیو لذت ببرید ...
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود فایل سخنرانی استیو جابز ...
ایبوک هدف‌گذاری موثر
زودتر از آنچه فکرش را می‌کنید به خواسته‌هایتان دست پیدا کنید!
* لینک دانلود بلافاصله ایمیل می‌شود.
چهار عامل شگفت انگیز کسب درآمد چیست؟
فقط چند ثانیه تا دانلود فاصله دارید!
* سه ایده کسب و کار خانگی پولساز
فقط چند ثانیه تا دانلود فاصله دارید!
* ایبوک: ده مکان عالی برای پیدا کردن یک ایده جدید
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود ویدیوی جذاب و با کیفیت مصاحبه جک ما
از همین امروز شروع کنید
بدون تجربه و دانش فنی وارد دنیای درآمدهای اینترنتی شوید!
فایل‌های آموزشی برای شما ایمیل می‌شود.
فقط چند ثانیه تا دریافت این فایل آموزشی فاصله دارید!
فایل‌های آموزشی ویژه اعضای سایت
* اگر عضو نیستید با وارد کردن ایمیل‌تان به این فایل دسترسی پیدا می‌کنید
دسترسی مخصوص اعضای سایت
عضو سایت نیستید؟
فقط کافیه نام و ایمیل‌تان را وارد کنید و ...
* دسترسی سریع به تمام فایل‌های آموزشی
هدیه ما به شما
با سپاس از اینکه دیدگاه تان را در سایت ما ثبت کردید.


یک کوپن تخفیف 30%
  • مشاوره حضوری
  • دوره های آنلاین
  • بسته های آموزشی
  • محصولات دانلودی
  • وبینارهای آموزشی
  این کد فقط یکبار به شما نمایش داده می‌شود.
کد: qwert
ورود کاربران
* دسترسی رایگان به بخش آکادمی