آموزش HTML 5 > طراحی اشیای گرافیکی در HTML 5 > نحوه کار با شی
canvas
بخش دوم
گام پنجم : دادن افکت به متن با شی canvas :
به وسیله شی canvas می توانید یک متن را در یک شکل گرافیکی قرار داده و یا جلوه های
تصویری به آن دهید . برای این منظور از متدها و خواص زیر استفاده می شود :
- خاصیت font : این خاصیت ویژگی های مختلف متن مثل اندازه ، نوع
قلم و ... را مشخص می کند ،
- ( fillText ( text , x , y : این متد متن نوشته مورد
نظر برای قرار دادن در شکل و مختصات محل قرار گیری آن را بر روی شکل تعیین می کند .
x : این پارامتر ، فاصله متن از لبه سمت چپی شکل را تعیین می کند .
y : این پارامتر ، فاصله متن از لبه سمت بالایی شکل را تعیین می کند .
مثال : در مثال زیر به وسیله خاصیت فونت و متد ( ) fillText ، متن
مورد نظرمان را در یک شکل مستطیل قرار داده ایم :
|
مثال
|
<canvas id="Canvas1" width="200" height="100" style="border: 1px
solid #d3d3d3;">
مرورگر شما از این شی پشتیبانی نمی کند
</canvas>
<script>
var c1 = document.getElementById("Canvas1");
var ctx1 = c1.getContext("2d");
ctx1.font = "30px Arial";
ctx1.fillText("Developer1", 10, 50);
</script>
|
|
خروجی
|
|
متد دیگری که می توان از آن برای قرار دادن یک متن در اشکال گرافیکی استفاده نمود ،
متد ( ) strokeText است . در این بخش قصد داریم تا نحوه کار با این متد را نمایش دهیم
:
- خاصیت font : این خاصیت ویژگی های مختلف متن مثل اندازه ، نوع
قلم و ... را مشخص می کند ،
- ( strokeText ( text , x , y : این متد متن نوشته مورد
نظر برای قرار دادن در شکل و مختصات محل قرار گیری آن را بر روی شکل تعیین می کند .
همچنین می توان یک جلوه تصویری را به متن داد .
x : این پارامتر ، فاصله متن از لبه سمت چپی شکل را تعیین می کند .
y : این پارامتر ، فاصله متن از لبه سمت بالایی شکل را تعیین می کند .
مثال : در مثال زیر به وسیله خاصیت فونت و متد ( ) strokeText ، متن
مورد نظرمان را در یک شکل مستطیل قرار داده ایم :
|
کد
|
<canvas id="Canvas2" width="200" height="100" style="border: 1px
solid #d3d3d3;">
مرورگر شما از این شی پشتیبانی نمی کند
</canvas>
<script>
var c2 = document.getElementById("Canvas2");
var ctx2 = c2.getContext("2d");
ctx2.font = "30px Arial";
ctx2.strokeText ("Developer1", 10, 50);
</script>
|
|
خروجی
|
|
گام ششم : تعیین پس زمینه های رنگی برای شی canvas و اشکال هندسی :
می توان به شی canvas و اشکال ایجاد شده به وسیله آن ، پس زمینه های رنگی با جلوه های
خاص داد .
اشکالی که توسط شی canvas ، تولید می شوند ، محدود به استفاده از رنگ های پس زمینه
ساده نیستند . به وسیله متدهای زیر ، می توانید پس زمینه های زیبا و با جلوه خاص ،
برای شکل خود تعیین نمایید :
- ( createLinearGradient ( x , y , x1 , y1 : این متد ، یک پس
زمینه با شیب خطی ایجاد می کند .
x : این پارامتر ، فاصله متن از لبه سمت چپی شکل را تعیین می کند .
y : این پارامتر ، فاصله متن از لبه سمت بالایی شکل را تعیین می کند .
- ( createRadialGradient ( x , y ,r , x1 , y1 , r1: این متد
، یک پس زمینه با شیب محدب ایجاد می کند .
توضیح بیشتر نحوه کار و مثال های عملی :
در استفاده از متدهای فوق ، می توانیم از 2 یا چند رنگ ، برای قرار دادن در پس زمینه
رنگی شکل استفاده کنیم .
این رنگ ها را به وسیله تابع ( ) addColorStop ، اضافه می کنیم . رنگ ها به ترتیب توسط
این تابع شماره گذاری شده و شماره آنها باید از 0 تا 1 باشد ( اعشاری ) .
سپس از متدهای ( ) fillStyle و ( ) fillRect ، رنگ ها را در شی canvas قرار می دهیم
.
برای درک بهتر ، به مثال های عملی زیر دقت نمایید :
|
مثال 1 - تعیین یک پس زمنیه خطی 2 رنگی
|
|
کد
|
<canvas id="Canvas3" width="200" height="100" style="border: 1px
solid #d3d3d3;">
مرورگر شما از این شی پشتیبانی نمی کند
</canvas>
<script>
var c3 = document.getElementById("Canvas3");
var ctx3 = c3.getContext("2d");
// Create gradient
var grd1=ctx3.createLinearGradient(0,0,200,0);
grd1.addColorStop(0,"red");
// رنگ اول
grd1.addColorStop(1,"white");
// رنگ دوم
// Fill with gradient
ctx3.fillStyle=grd1;
ctx3.fillRect(10,10,150,80);
</script>
|
|
خروجی
|
|
|
مثال 2 - تعیین یک پس زمنیه خطی 3 رنگی
|
|
کد
|
<canvas id="Canvas4" width="200" height="100" style="border: 1px
solid #d3d3d3;">
مرورگر شما از این شی پشتیبانی نمی کند
</canvas>
<script>
var c4 = document.getElementById("Canvas4");
var ctx4 = c4.getContext("2d");
// Create gradient
var grd2=ctx4.createLinearGradient(0,0,200,0);
grd2.addColorStop(0,"red");
// رنگ اول
grd2.addColorStop(0.5,"white");
// رنگ دوم
grd2.addColorStop(1,"green");
// رنگ سوم
// Fill with gradient
ctx4.fillStyle=grd2;
ctx4.fillRect(10,10,150,80);
</script>
|
|
خروجی
|
|
|
مثال 3 - تعیین یک پس زمنیه محدب 2 رنگی
|
|
کد
|
<canvas id="Canvas5" width="200" height="100" style="border: 1px
solid #d3d3d3;">
مرورگر شما از این شی پشتیبانی نمی کند
</canvas>
<script>
var c5 = document.getElementById("Canvas5");
var ctx5 = c5.getContext("2d");
// Create gradient
var grd3=ctx5.createRadialGradient(90,50,5,90,60,100);
grd3.addColorStop(0,"red");
grd3.addColorStop(1,"white");
// Fill with gradient
ctx5.fillStyle=grd3;
ctx5.fillRect(10,10,150,80);
</script>
|
|
خروجی
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :