آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

آموزش 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>
خروجی         مرورگر شما از این شی پشتیبانی نمی کند


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید  :

آیا مطالب این صفحه برای شما مناسب و مفید بود ه است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : جمع سه + پنج چنده ؟