منو

طراحی اشیای گرافیکی(قسمت بیست و یکم)

 طراحی اشیای گرافیکی
لیست جلسات
DatoosTech img Course

قسمت اول

مقدمه html

DatoosTech img Course

قسمت دوم

چهارچوب اصلی صفحه های وب

DatoosTech img Course

قسمت سوم

تگ های فراخوانی

DatoosTech img Course

قسمت چهارم

خواص استاندارد تگ های HTML

DatoosTech img Course

قسمت پنجم

تگ های قاب بندی متن

DatoosTech img Course

قسمت ششم

ایجاد لینک در html

DatoosTech img Course

قسمت هفتم

ایجاد جدول در html

DatoosTech img Course

قسمت هشتم

لیست ها در html

DatoosTech img Course

قسمت نهم

فرم ها در html

DatoosTech img Course

قسمت دهم

کنترول ها در html

DatoosTech img Course

قسمت یازدهم

تصاویر در html

DatoosTech img Course

قسمت دوازدهم

استایل در html

DatoosTech img Course

قسمت سیزدهم

آدرس های اینترنتی (url)

DatoosTech img Course

قسمت چهاردهم

اسکریپت ها در Html

DatoosTech img Course

قسمت پانزدهم

تقسيم بندی صفحه و متن در Html

DatoosTech img Course

قسمت شانزدهم

رويدادهای HTML

DatoosTech img Course

قسمت هفدهم

کنترل های ذاتی HTML

DatoosTech img Course

قسمت هجدهم

خواص جدید کنترل ها در HTML 5

DatoosTech img Course

قسمت نوزدهم

اجرای مدیا در Html

DatoosTech img Course

قسمت بیستم

قابلیت های پیشرفته Html 5

DatoosTech img Course

قسمت بیست و یکم

طراحی اشیای گرافیکی

DatoosTech img Course

قسمت بیست و دوم

لیست تگ های Html

مطالب این جلسه

از تگ < canvas > در Html 5 برای طراحی اشیا و اشکال گرافیکی بصورت Run Time به کمک زبان های اسکریپتی مثل مثل جاوا اسکریپت استفاده می شود . بوسیله تگ < canvas > شما می توانید اشیای گرافیکی مثل مربع ، دایره ، تصاویر و ... را بر روی صفحه ایجاد نمایید . تگ < canvas > خود به تنهایی خروجی بر روی صفحه نداشته و فقط به عنوان یک نگهدارنده برای اشیای گرافیکی استفاده می شود . عمل طراحی اشکال بوسیله جاوا اسکریپت انجام می شود .

شکل کلی استفاده از تگ < canvas > بصورت زیر است :

<div id="id"> </div>
توضیح
Parameter توضیح
id این پارامتر تعیین کننده شناسه یا id تگ در صفحه است .
حتما این پارامتر را برای تگ < canvas > تعیین نمایید ، زیرا به وسیله آن می توان در اسکریپت ها و سایر صفحه ، به تگ مورد نظرتان دسترسی داشته باشید .

این تگ در تمام مرورگرهای اصلی پشتیبانی می شود .

اگر مرورگر از تگ < canvas > پشتیبانی نکند ، متن ( Text) که درون آن وجود دارد ، به جای شکل گرافیکی نمایش داده می شود .

تگ < canvas > در Html 5 جدید است .

در لیست زیر ، خواص تگ < canvas > نشان داده شده اند :

توضیح
Parameter توضیح
height این خاصیت ارتفاع شکل هندسی را تعیین می کند .
width این خاصیت عرض شکل هندسی را تعیین می کند .

در مثال زیر یک تگ < canvas > را با id برابر MyCanvas ، تعریف کرده ایم . سپس به وسیله یک اسکریپت آن تگ را فراخوانی کرده و با استفاده از متدهای خاصی ، شکلی را برای آن طراحی کرده ایم .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<canvas id="MyCanvas" height="100px" width="100px">
اگر مرورگر از این تگ پشتیانی نکند ، این متن نمایش داده می شود
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("MyCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 100);
</script>
</body>
</html>
پیش نمایش

نحوه کار با شی canvas :

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

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

گام اول : ایجاد یک شی canvas :

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

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

همواره خاصیت id را برای تگ < canvas > تعیین نمایید تا بتوانید به راحتی در کد های اسکریپت به آن دسترسی داشته باشید .

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

برای اضافه کردن خطوط حاشیه به عنصر از خاصیت Style استفاده نمایید .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<canvas id="MyCanvas" height="100px" width="100px" style="border:1px solid #000">
اگر مرورگر از این تگ پشتیانی نکند ، این متن نمایش داده می شود
</canvas>
</body>
</html>
پیش نمایش

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

در مرحله قبل گفتیم که شی canvas فقط به عنوان یک نگهدارنده شکل هندسی بوده و خروجی بر روی صفحه ندارد . عملیات طراحی و تعیین شکل مورد نظر را باید بوسیله یک اسکریپت ( معمولا به زبان جاوا اسکریپت ) انجام می دهیم . در این بخش با ارایه یک مثال عملی و تشریح مرحله به مرحله کد آن قصد داریم ، شما را با نحوه طراحی شکل آشنا نماییم :

در ابتدا باید تگ canvas مورد نظر را بر روی صفحه پیدا کنیم .

var c = document.getElementById("MyCanvas");

سپس بوسیله متد canvas شی را فراخوانی و متد " 2d " را به آن ارسال کنیم . canvas یک شی پیش ساخته در Html 5 بوده و دارای خواص و متد های بسیاری برای طراحی اشیا می باشد . ارسال مقدار 2d به معنای دو بعدی بودن عنصر است .

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

در مرحله بعدی اقدام به تعیین رنگ پس زمینه و موقعیت و اندازه شکل می پردازیم :

ctx.fillStyle = "#FF0000";
ctx.fillStyle = ctx.fillRect(0,0,150,75);

خاصیت fillStyle رنگ پس زمینه شکل را تعیین می کند . در این مثال رنگ قرمز برای مثال در نظر گرفته شده است .

همچنین خاصیت fillRect موقعیت قرار گیری شکل در صفحه و اندازه آن را تعیین می کند .

شکلل کلی استفاده از این مند به صورت زیر است :

fillRect(x,y,width,height);

x : موقعیت قرار گیری عنصر در جهت افقی یا به عبارت دیگر فاصله آن از لبه سمت راستی عنصر مادر خود را تعیین می کند . ( مختصات x )

y : موقعیت قرار گیری عنصر در جهت عمودی یا به عبارت دیگر فاصله آن از لبه سمت بالایی عنصر مادر خود را تعیین می کند . ( مختصات y )

width : میزان عرض عنصر را تعیین می کند .

height : میزان ارتفاع عنصر را تعیین می کند .

خروجی نهایی : در نهایت کد ما و خروجی آن به صورت زیر خواهد بود :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<canvas id="MyCanvas" height="100px" width="200px" style="border:1px solid #000">
اگر مرورگر از این تگ پشتیانی نکند ، این متن نمایش داده می شود
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("MyCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
پیش نمایش

گام سوم : کشیدن خطوط canvas به وسیله جاوا اسکرپیت :

در مرحله قبل نحوه کشیدن یک شکل 2 بعدی را بوسیله تگ < convas > توضیح دادیم . در این مرحله می خواهیم نحوه کشیدن یک خط ساده در صفحه را نشان دهیم . برای این کار از متد های زیر استفاده می کنیم :

( moveTo ( x , y : این متد مختصات نقطه شروع خط را تعیین می کند .

( lineTo ( x , y : این متد مختصات نقطه پایان خط را تعیین می کند

پس از تعیین مختصات نقطه شروع و پایان خط بوسیله متد ( ) Storke اقدام به کشیدن خط نمایید .

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

ابتدا ، شی Canvas1 را بر روی صفحه فرا خوانده و در متغیر c1 ذخیره می کنیم .

سپس طرح دو بعدی شی c1 را ایجاد کرده و در متغیر ctx1 می ریزیم .

در نهایت با تعیین مختصات ونقطه شروع و پایان خط ، آن را در خروجی طراحی می کنیم .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<canvas id="MyCanvas" width="200" height="100" style="border:1px solid #000">
اگر مرورگر از این تگ پشتیانی نکند ، این متن نمایش داده می شود
</canvas>
<script type="text/javascript">
var c1 = document.getElementById("MyCanvas");
var ctx1 = c1.getContext("2d");
ctx1.moveTo(0,0);
ctx1.lineTo(200,100);
ctx1.stroke();
</script>
</body>
</html>
پیش نمایش

گام چهارم – کشیدن یک دایره در صفحه وب :

برای کشیدن یک دایره بر روی صفحه ، از متد زیر استفاده می کنیم "

( arc ( x , y , r, start ,stop : این متد مختصات نقطه شروع ، اندازه شعاع و نقطه پایان دایره را مشخص می کند .

پس از تعیین مختصات نقطه شروع و پایان خط بوسیله متد ( ) Storke اقدام به کشیدن دایره نمایید .

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

ابتدا ، شی Canvas2 را بر روی صفحه فرا خوانده و در متغیر c2 ذخیره می کنیم .

سپس طرح دو بعدی شی c2 را ایجاد کرده و در متغیر ctx2 می ریزیم .

در نهایت با تعیین مختصات و اندازه ای شی دایره ، آن را در خروجی طراحی می کنیم .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<canvas id="MyCanvas" width="200" height="100" style="border:1px solid #000">
اگر مرورگر از این تگ پشتیانی نکند ، این متن نمایش داده می شود
</canvas>
<script type="text/javascript">
var c1 = document.getElementById("MyCanvas");
var ctx1 = c1.getContext ("2d");
ctx1.beginPath(0,0);
ctx1.arc(95,50,40,0,2*Math.PI);
ctx1.stroke();
</script>
</body>
</html>
پیش نمایش

گام پنجم : دادن افکت به متن با شی canvas :

به وسیله شی canvas می توانید یک متن را در یک شکل گرافیکی قرار داده و یا جلوه های تصویری به آن دهید . برای این منظور از متدها و خواص زیر استفاده می شود :

خاصیت font : این خاصیت ویژگی های مختلف متن مثل اندازه ، نوع قلم و ... را مشخص می کند ،

( fillText ( text , x , y : این متد متن نوشته مورد نظر برای قرار دادن در شکل و مختصات محل قرار گیری آن را بر روی شکل تعیین می کند .

x : این پارامتر ، فاصله متن از لبه سمت چپی شکل را تعیین می کند .

y : این پارامتر ، فاصله متن از لبه سمت بالایی شکل را تعیین می کند .

در مثال زیر به وسیله خاصیت فونت و متد ( ) fillText ، متن مورد نظرمان را در یک شکل مستطیل قرار داده ایم :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<canvas id="MyCanvas" width="200" height="100" style="border:1px solid #000">
اگر مرورگر از این تگ پشتیانی نکند ، این متن نمایش داده می شود
</canvas>
<script type="text/javascript">
var c1 = document.getElementById("MyCanvas");
var ctx1 = c1.getContext ("2d");
ctx1.font ="30px Aria";
ctx1.fillText("DatoosTech.com",10,50);
</script>
</body>
</html>
پیش نمایش

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

خاصیت font : این خاصیت ویژگی های مختلف متن مثل اندازه ، نوع قلم و ... را مشخص می کند ،

( strokeText ( text , x , y : این متد متن نوشته مورد نظر برای قرار دادن در شکل و مختصات محل قرار گیری آن را بر روی شکل تعیین می کند . همچنین می توان یک جلوه تصویری را به متن داد .

x : این پارامتر ، فاصله متن از لبه سمت چپی شکل را تعیین می کند .

y : این پارامتر ، فاصله متن از لبه سمت بالایی شکل را تعیین می کند .

در مثال زیر به وسیله خاصیت فونت و متد ( ) strokeText ، متن مورد نظرمان را در یک شکل مستطیل قرار داده ایم :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<canvas id="MyCanvas" width="200" height="100" style="border:1px solid #000">
اگر مرورگر از این تگ پشتیانی نکند ، این متن نمایش داده می شود
</canvas>
<script type="text/javascript">
var c1 = document.getElementById("MyCanvas");
var ctx1 = c1.getContext ("2d");
ctx1.font ="30px Aria";
ctx1.strokeText("DatoosTech.com",10,50);
</script>
</body>
</html>
پیش نمایش

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

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

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

( createLinearGradient ( x , y , x1 , y1 : این متد ، یک پس زمینه با شیب خطی ایجاد می کند .

x : این پارامتر ، فاصله متن از لبه سمت چپی شکل را تعیین می کند .

y : این پارامتر ، فاصله متن از لبه سمت بالایی شکل را تعیین می کند .

( createRadialGradient ( x , y ,r , x1 , y1 , r1: این متد ، یک پس زمینه با شیب محدب ایجاد می کند .

توضیح بیشتر نحوه کار و مثال های عملی :

در استفاده از متدهای فوق ، می توانیم از 2 یا چند رنگ ، برای قرار دادن در پس زمینه رنگی شکل استفاده کنیم .

این رنگ ها را به وسیله تابع ( ) addColorStop ، اضافه می کنیم . رنگ ها به ترتیب توسط این تابع شماره گذاری شده و شماره آنها باید از 0 تا 1 باشد ( اعشاری ) .

سپس از متدهای ( ) fillStyle و ( ) fillRect ، رنگ ها را در شی canvas قرار می دهیم .

برای درک بهتر ، به مثال های عملی زیر دقت نمایید :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<canvas id="MyCanvas" width="200" height="100" style="border:1px solid #000">
اگر مرورگر از این تگ پشتیانی نکند ، این متن نمایش داده می شود
</canvas>
<script type="text/javascript">
var c1 = document.getElementById("MyCanvas");
var ctx1 = c1.getContext ("2d");
var grd1 = ctx1.createLinearGradient(0,0,200,0);
grd1.addColorStop(0,"red");
grd1.addColorStop(1,"white");
ctx1.fillStyle = grd1;
ctx1.fillRect(10,10,150,80);
</script>
</body>
</html>
پیش نمایش

تعیین یک پس زمنیه خطی 3 رنگی

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<canvas id="MyCanvas" width="200" height="100" style="border:1px solid #000">
اگر مرورگر از این تگ پشتیانی نکند ، این متن نمایش داده می شود
</canvas>
<script type="text/javascript">
var c1 = document.getElementById("MyCanvas");
var ctx1 = c1.getContext ("2d");
var grd1 = ctx1.createLinearGradient(0,0,200,0);
grd1.addColorStop(0,"red");
grd1.addColorStop(0.5,"white");
grd1.addColorStop(1,"green");
ctx1.fillStyle = grd1;
ctx1.fillRect(10,10,150,80);
</script>
</body>
</html>
پیش نمایش

تعیین یک پس زمنیه محدب 2 رنگی

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<canvas id="MyCanvas" width="200" height="100" style="border:1px solid #000">
اگر مرورگر از این تگ پشتیانی نکند ، این متن نمایش داده می شود
</canvas>
<script type="text/javascript">
var c1 = document.getElementById("MyCanvas");
var ctx1 = c1.getContext ("2d");
var grd1 = ctx1.createRadialGradient(90,50,5,90,60,100);
grd1.addColorStop(0,"red");
grd1.addColorStop(1,"#FFF");
ctx1.fillStyle = grd1;
ctx1.fillRect(10,10,150,80);
</script>
</body>
</html>
پیش نمایش