advertise laitec sharif univercity
دانلود سورس هوش مصنوعی رنگ آمیزی گراف با ژنتیک در #C

دانلود سورس هوش مصنوعی رنگ آمیزی گراف با ژنتیک در #C

10000 تومان
دانلود پروژه معمای 8 با الگوریتم ژنتیک در سی شارپ

دانلود پروژه معمای 8 با الگوریتم ژنتیک در سی شارپ

10000 تومان
دانلود پروژه فروشنده دوره گرد با الگوریتم گرانشی در #C

دانلود پروژه فروشنده دوره گرد با الگوریتم گرانشی در #C

10000 تومان
سورس پروژه پایانی وب سایت و نرم افزار کلینیک در ASP.net

سورس پروژه پایانی وب سایت و نرم افزار کلینیک در ASP.net

48000 تومان
دانلود پروژه مدیریت کتابخانه با سی شارپ و SQL سرور

دانلود پروژه مدیریت کتابخانه با سی شارپ و SQL سرور

10000 تومان

گرافیک در HTML و تگ های Canvas و SVG

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

گرافیک در HTML و تگ های Canvas و SVG

برای ترسیم اشکال گوناگون گرافیکی در HTML از دو عنصر Canvas و SVG استفاده میشود که هر کدام کاربردها و قابلیتهای جالب و متنوعی دارند. در ادامه هرکدام از این برچسب های کارآمد را همراه با ویژگی هایشان معرفی خواهیم کرد.

 

عنصر Canvas در HTML

برچسب Canvas مربوط به HTML برای ترسیم اشکال گرافیکی در یک صفحه وب استفاده میشود.

♦ ​کانواس html چیست؟

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

Convas چندین متد برای رسم مسیر، جعبه، دایره، متن، و اضافه کردن تصاویر دارد.

 

♦​ پشتیبانی مرورگر ها از عنصر Convas

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

► مرورگر chrome  : نسخه 4.0

► مرورگر FireFox : ورژن 2.0

► مرورگر internet Explorer : ورژن 9.0

► مرورگر Opera : نسخه 9.0

► مرورگر safari : نسخه 3.1

 

♦​  نمونه هایی از Convas

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

نشانه گذاری این عنصر بصورت زیر میباشد: ( در تمامی مثالها به جای() از علامتهای <> استفاده کنید)

(canvas id="myCanvas" width="200" height="100")(/canvas)

توجه داشته باشید: همیشه ویژگی id را مشخص کنید، و مشخصه های عرض و ارتفاع را برای تعریف کردن اندازه Convas تعیین نمایید.

برای تعیین حاشیه عنصر از ویژگی "style" بصورت زیر استفاده نمایید:

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

 

طراحی با جاوا اسکریپت :

(script)
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
(/script)
 : رسم یک خط
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");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);

 

 

برچسب SVG در HTML

♦ SVG  چیست؟

SVG مخفف کلمه Scalable Vector Graphics (گرافیک برداری مقیاس پذیر) میباشد و برای تعریف گرافیک در وب سایت استفاده می شود.

 

♦ عنصر SVG مربوط به HTML

تگ SVG که در HTML5 معرفی شده است، ظرفی برای گرافیک SVG است.

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

 

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

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

 مرورگر chrome  : نسخه 4.0

 مرورگر FireFox : ورژن 3.0

 مرورگر internet Explorer : ورژن  9.0

 مرورگر Opera : نسخه 10.1

 مرورگر safari : نسخه 3.2

 

♦ نمونه هایی از SVG

رسم دایره توپر با حاشیه رنگی با عنصر SVG
(!DOCTYPE html)
(html)
(body)

(svg width="100" height="100")
  (circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /)
(/svg)

(/body)
(/html)
رسم مستطیل توپر با حاشیه رنگی با عنصر SVG
(svg width="400" height="100")
  (rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /)
(/svg)
رسم ستاره با SVG
(svg width="300" height="200")
  (polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /)
(/svg)

 

 

تفاوت بین Canvas و SVG

SVG زبانی برای توصیف گرافیک 2D در XML است.

Canvas گرافیک دو بعدی را به کمک JavaScript ترسیم میکند.

SVG مبتنی بر XML است به این معنی که هر عنصری در SVG DOM موجود است. شما میتوانید گرداننده رویداد جاوا اسکریپت را برای یک عنصر ضمیمه کنید.

در SVG، هر شکل کشیده شده به عنوان یک شی تلقی میشود. اگر ویژگی های یک شی SVG تغییر کنند، مرورگر می تواند به طور خودکار دوباره شکل را بارگزاری نماید.

Convas بصورت پیکسل به پیکسل ارائه میشود. در Convas پس از اینکه شکل رسم شد، مرورگر آنرا فراموش میکند. اگر مکان شکلی بخواهد تغییر کند باید کل شکل دوباره رسم گردد.

 

برخی تفاوت های مهم  Canvas و SVG بصورت زیر میباشند:

Canvas

► رزولوشن وابسته

► بدون پشتیبانی هندلرهای ایونت

► قابلیت ارائه متن ضعیف

► شما می توانید تصویر حاصل را با فرمتهای .png یا .jpg ذخیره کنید

► بسیار مناسب برای بازی های گرافیکی فشرده

 

SVG

► رزولوشن مستقل

► پشتیبانی از هندلرهای ایونت

► خیلی مناسب برای برنامه های کاربردی با نواحی ارائه بزرگ (نقشه های گوگل)

► رندر کُند اگر پیچیده باشد

► برای برنامه های بازی مناسب نیست

 

 



1
نظرات
  • user avatar عظیمی:
    ۰۹:۳۵:۰۳ __ ۱۳۹۷/۱۰/۰۶

    ممنون خیلی عالی بود

نظر خود را ارسال کنید



نام:
ایمیل:
دیدگاه:
captcha
کد امنیتی :


advertise
رسم شکل در html5 چگونه است؟نمونه هایی از SVG برای ترسیم اشکال گرافیکی در طراحی سایتترسیم اشکال گرافیکی در HTML5نمونه هایی از Convas در HTML5معرفی عناصر کانواس و اس وی جی در اچ تی ام البرچسب SVG در HTMLکاربرد SVG در HTML چیست؟Canvas در HTML5 چیست؟پشتیبانی مرورگر ها از تگ SVGبرخی تفاوت های مهم Canvas و SVG در طراحی سایت با HTML5در HTML چگونه میتوان اشکال گرافیکی رسم کرد؟آموزش عنصر کانواس در گرافیک وب سایتعناصر گرافیک در html کدامند؟معرفی برچسب های جدید HTML5 برای ترسیم شکل لیست برچسب ها
تمامی حقوق این سایت اعم از محتوی ، تصاویر ، قالب و ... متعلق به گروه مهندسی وب سایت سورس کد می باشد.
SourceCodes.ir ، افقی روشن برای برنامه نویسان ، از مبتدی تا حرفه ای

پیشنهادات ویژه سورس کد

پکیج ویژه پروژه پایانی رشته کامپیوتر دانلود مجموعه 70 پروژه کاربردی سی شارپ وب سایت فروشگاه با php