دراین قسمت از سری مقاله های درمورد canvas قصد داریم به چگونگی ترسیم متن در اونها بپردازیم.
نکته: توجه داشته باشین که کدهای گفته شده در مقاله ها رو در ویرایشگر متن وارد کنید و اون هارو اجرا کنین تا نتیجه رو مشاهده کنین. راحتترین روش برای اینکار، کدها رو در Nodepad وارد کنین و فایل اونو با فرمت html. ذخیره کنین و بعد اونو با مرورگرتون اجرا کنین تا تغییرات انجام شده رو مشاهده کنین.
ترسیم متن روی canvas:
برای ترسیم متن روی canvas ویژگی ها و متدهایی که اغلب مهم اند اینها هستند:
- font – این ویژگی برای تعریف نوع قلم متن به کار میره.
- (fillText(text,x,y – وظیفه ترسیم متن رو به صورت توپر روی canvas داره.
- (strokeText(text,x,y – شبیه به بالایی عمل میکنه با این تفاوت که تو پر نیست
استفاده از ()fillText:
به عنوان مثال ما اندازه قلم رو به اندازه ۳۰ پیکسل و نوع قلم “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:
در این مثال هم ما اندازه قلم رو ۳۰ پیکسل و نوع اونو “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” و باهمون اندازه ۳۰ پیکسل تنظیم میکنیم. با توابعی که در کد اومده رنگشو قرمز و ترتیبشو وسط چین میکنیم.
<!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>
. در سری مقالات بعد قصد داریم طریقه ایجاد یک ساعت رو باهم بررسی کنیم
نوشته canvas – قسمت چهارم اولین بار در LeanFiles.Com Academy – Online Training Courses پدیدار شد.
مبنع این خبر (برای مشاهده متن کامل خبر لینک زیر را بزنید):
LeanFiles.Com Academy – Online Training Courses