بخش مقالات آکادمی | Articles
آخرین آموزش ها

دراین قسمت از سری مقاله های درمورد canvas قصد داریم به چگونگی ترسیم متن در اونها بپردازیم.
نکته: توجه داشته باشین که کدهای گفته شده در مقاله ها رو در ویرایشگر متن وارد کنید و اون هارو اجرا کنین تا نتیجه رو مشاهده کنین. راحتترین روش برای اینکار، کدها رو در Nodepad وارد کنین و فایل اونو با فرمت html. ذخیره کنین و بعد اونو با مرورگرتون اجرا کنین تا تغییرات انجام شده رو مشاهده کنین.

ترسیم متن روی canvas:

برای ترسیم متن روی canvas ویژگی ها و متدهایی که اغلب مهم اند اینها هستند:

  • font – این ویژگی برای تعریف نوع قلم متن به کار میره.
  •  (fillText(text,x,y – وظیفه ترسیم متن رو به صورت توپر روی canvas داره.
  • (strokeText(text,x,y – شبیه به بالایی عمل میکنه با این تفاوت که تو پر نیست

استفاده از ()fillText:

به عنوان مثال ما اندازه قلم رو به اندازه 30 پیکسل و نوع قلم “Arial” و یک متن توپر داخل canvas مینویسیم.

<!DOCTYPE html>
<html>
<body>
<canvas id=”myCanvas” width=”200″ height=”100″style=”border:1px solid #d3d3d3;”>

Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById(“myCanvas”);
var ctx = canvas.getContext(“2d”);
ctx.font = “30px Arial”;
ctx.fillText(“Hello World”,10,50);
</script>
</body>
</html>

استفاده از ()strokeText:

در این مثال هم ما اندازه قلم رو 30 پیکسل و نوع اونو “Arial” تنظیم میکنیم ولی ایندفه با استفاده ازین تابع نوشته توخالی رو در canvas می نویسیم.

<!DOCTYPE html>
<html>
<body>
<canvas id=”myCanvas” width=”200″ height=”100″style=”border:1px solid #d3d3d3;”>

Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById(“myCanvas”);
var ctx = canvas.getContext(“2d”);
ctx.font = “30px Arial”;
ctx.strokeText(“Hello World”,10,50);
</script>
</body>
</html>

افزودن رنگ و وسط چین کردن نوشته:

اینبار دراین مثال نوع قلم رو “Comic Sans MS”  و باهمون اندازه 30 پیکسل تنظیم میکنیم. با توابعی که در کد اومده رنگشو قرمز و ترتیبشو وسط چین میکنیم.

<!DOCTYPE html>
<html>
<body>
<canvas id=”myCanvas” width=”300″ height=”200″style=”border:1px solid#d3d3d3;”>
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById(“myCanvas”);
var ctx=canvas.getContext(“2d”);
ctx.font=”30px Comic Sans MS”;
ctx.fillStyle = “red”;
ctx.textAlign = “center”;
ctx.fillText(“Hello World”, canvas.width/2, canvas.height/2);
</script>
</body>
</html>

 . در سری مقالات بعد قصد داریم طریقه ایجاد یک ساعت رو باهم بررسی کنیم

تاریخ ارسال
30 اردیبهشت 1395
ارسال شده توسط
محمدرضا تناکیان
میزان بازدید
0 نفر بازدیدکننده
0 دیدگاه
فایلی جهت دانلود وجود ندارد !
مشخصات
حجم و فرمت :

0 دیدگاه ثبت شده

شما هم نظری بدهید
هنوز دیدگاهی ثبت نشده
توجه فرمایید:
نظرات شما پس از بررسی و تایید نمایش داده می شود.
لطفا نظرات خود را فقط در مورد مطلب بالا ارسال کنید.