دليل HTML

جميع علامات HTML

طريقة HTML canvas fillText()

fillText() هي طريقة في API Canvas 2D لملء النص في موقع (x, y). إذا تم تقديم متغيرات إضافية كمتغيرات الخيارات الرابعة، يتم تقليل حجم النص لتناسب الارتفاع الأقصى المحدد.

دليل مرجعي لـ HTML canvas

مثال على الإنترنت

استخدام fillText()، لتحرير نص "دليل الأساسيات!" و "oldtoolbag.com!" على اللوحة باستخدام التدرج:

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>استخدام طريقة fillText() في HTML canvas - دليل الأساسيات (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
حاسوبك لا يدعم علامة <canvas> الخاصة بـ HTML5.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.font="20px　Georgia";
ctx.fillText("基础教程网!",10,50);
ctx.font="30px　Verdana";
//　创建一个渐变
var　gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
//　填充一个渐变
ctx.fillStyle=gradient;
ctx.fillText("oldtoolbag.com!",10,90);
</script>
</body>
</html>

测试看看 </>

浏览器兼容性

IEFirefoxOperaChromeSafari

يدعم Internet Explorer 9 وFirefox وOpera وChrome وSafari fillText(). الطريقة.

ملاحظة:Internet Explorer 8 وكل الإصدارات السابقة لا يدعم عنصر <canvas>.

ملاحظة:Safari لا يدعم معامل maxWidth.

تعريف والاستخدام

يتم رسم النص المملوء باستخدام fillText() على اللوحة. لون النص الافتراضي هو الأسود (#000000).

نصيحة:استخدم font لتحديد الخط والحجم، ثم استخدم fillStyle يتم تلوين النص بألوان أخرى/تدرجات.

جملة لغوية جافا سكريبت:	السياق.fillText(text,x,y,maxWidth);

قيمة المعلمات

المعلمات	وصف
text	تحديد النص الذي سيتم إخراجه على اللوحة.
x	موقع x للبدء في رسم النص (نسبة إلى اللوحة).
y	موقع y للبدء في رسم النص (نسبة إلى اللوحة).
maxWidth	اختياري. أقصى عرض النص، مقاسه ببكسل.

دليل مرجعي لـ HTML canvas

HTML: <template> العنوان