تекст‌های کانواس HTML

رسم متن روی کانواس

برای رسم متن روی کانواس، مهم‌ترین ویژگی و روش‌ها عبارتند از:

  • font - تعریف ویژگی فونت متن
  • fillText(text,x,y) - در کانواس متن پر شده رسم کنید
  • strokeText(text,x,y) - در کانواس متن بدون پر کردن رسم کنید

از fillText() استفاده کنید

مثال

قلم را به "30px Arial" تنظیم کنید و متن پر شده روی کانواس بنویسید:

موزع وب شما پشتیبانی از برچسب کانواس HTML5 را ندارد.

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

به طور مستقیم امتحان کنید

از strokeText() استفاده کنید

مثال

قلم را به "30px Arial" تنظیم کنید و متن را روی کانواس بنویسید (بدون پر کردن):

موزع وب شما پشتیبانی از برچسب کانواس HTML5 را ندارد.

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

به طور مستقیم امتحان کنید

افزودن رنگ و قرار دادن متن در وسط

مثال

قلم را به "30px Comic Sans MS" تنظیم کنید و متن قرمز را در وسط کانواس بنویسید:

موزع وب شما پشتیبانی از برچسب کانواس HTML5 را ندارد.

JavaScript:

const canvas = document.getElementById("myCanvas");
const 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);

به طور مستقیم امتحان کنید

لطفاً به: مراجعه کنید

دستورالعمل‌های کامل کانواس CodeW3C.com