أحدث البرامج التعليمية وتطوير الشبكة
 

نص HTML قماش


رسم النص على قماش

رسم النص على قماش، والممتلكات، وأهم طرق هي:

  • font - يحدد خصائص الخط للنص
  • fillText( text,x,y ) - توجه "filled" النص على قماش
  • strokeText( text,x,y ) - توجه النص على القماش (no fill)

باستخدام fillText()

مثال

تعيين الخط إلى 30px "Arial" وكتابة نص شغل على القماش:

متصفحك لا يدعم قماش العلامة HTML5.

جافا سكريبت:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
انها محاولة لنفسك »

باستخدام strokeText()

مثال

تعيين الخط إلى 30px "Arial" وكتابة نص، مع عدم وجود التعبئة، على قماش:

متصفحك لا يدعم قماش العلامة HTML5.

جافا سكريبت:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
انها محاولة لنفسك »

إضافة اللون ومركز نص

مثال

تعيين الخط إلى 30px "هزلية بلا MS" وكتابة نص أحمر شغل في وسط اللوحة:

متصفحك لا يدعم قماش العلامة HTML5.

جافا سكريبت:

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);
انها محاولة لنفسك »