canvas – قسمت چهارم

نوشته شده توسط: adminدر تاریخ: اردیبهشت ۳۰, ۱۳۹۵در: آموزشیبازدید: 555 بازدید

دراین قسمت از سری مقاله های درمورد 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>