دليل مرجع HTML

مجموعة كاملة من علامات HTML

طريقة HTML canvas strokeText()

strokeText() هي طريقة في API Canvas 2D لرسم النصوص في موقع (x, y) المحدد. إذا تم تقديم الرابع parameter الممثل للمقياس الأقصى، فإن النص سيتم تقليله أو تمدده لتتناسب مع العرض.

دليل مرجع HTML canvas

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

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

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>استخدام طريقة strokeText() لـ 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.strokeText("基础教程网!",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.strokeStyle=gradient;
ctx.strokeText("ar.oldtoolbag.com!",10,90);
</script>
</body>
</html>

测试看看 ‹/›

浏览器兼容性

IEFirefoxOperaChromeSafari

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

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

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

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

يتم رسم النص على لوحة الرسم باستخدام طريقة strokeText() (بدون ملء). لون النص الافتراضي أسود.

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

جملة لغوية JavaScript:	السياق.strokeText(text,x,y,maxWidth);

قيمة المعامل

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

دليل مرجع HTML canvas

HTML: <template> علامة