نص قماش HTML
رسم نص على قماش
لرسم نص على لوحة قماشية ، فإن أهم الخصائص والطرق هي:
- الخط - يحدد خصائص الخط للنص
- fillText ( text، x، y ) - يرسم النص "المعبأ" على اللوحة القماشية
- strokeText ( text، x، y ) - يرسم النص على اللوحة القماشية (بدون تعبئة)
باستخدام fillText ()
مثال
اضبط الخط على 30 بكسل "Arial" واكتب نصًا ممتلئًا على اللوحة القماشية:
جافا سكريبت:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
باستخدام StrText ()
مثال
اضبط الخط على 30 بكسل "Arial" واكتب نصًا بدون تعبئة على اللوحة القماشية:
جافا سكريبت:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
أضف لونًا ونصًا مركزيًا
مثال
اضبط الخط على 30 بكسل "Comic Sans MS" واكتب نصًا أحمر معبأ في وسط اللوحة:
جافا سكريبت:
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);