التعليق: ستقدم هذه المقالة تأثيرات ملء HTML5 ملء ونص السكتة الدماغية بالتفصيل. استنادًا إلى القماش ، وكيفية تحقيق ملء الملمس والسكتة الدماغية ، وملء الألوان والسكتة الدماغية ، يكون الرمز المحدد كما يلي. يمكن للأصدقاء المهتمين الرجوع إليها. آمل أن يكون ذلك مفيدًا للجميع.
إظهار تأثيرات ملء قماشية HTML5 والسكتة الدماغية ، استنادًا إلى كيفية تطبيق اللوحة القماشية والسكتة الدماغية.1: ملء اللون والسكتة الدماغية
يمكن تحقيق ملء الألوان من خلال FillStyle ، ويمكن تحقيق لون السكتة الدماغية من خلال Strokestyle. مثال بسيط
على النحو التالي:
// ملء النص والسكتة الدماغية
ctx.font = '60pt calibri' ؛
ctx.linewidth = 3 ؛
ctx.strokestyle = 'الأخضر' ؛
ctx.stroketext ('Hello World!' ، 20 ، 100) ؛
ctx.fillstyle = 'red' ؛
ctx.filltext ('Hello World!' ، 20 ، 100) ؛
الثاني: ملء الملمس والسكتة الدماغية
HTML5 قماش يدعم أيضا ملء الملمس. عن طريق تحميل صورة نسيج ثم إنشاء نمط فرشاة ، فإن واجهة برمجة التطبيقات لإنشاء أنماط الملمس هي ctx.createpattern (ImageTexture ، Reper) ؛ تدعم المعلمة الثانية أربع قيم ، وهي REPERT-X ، REPER-Y ، التكرار ، عدم التكرار ، مما يعني أن الملمس يتكرر أو لم يتكرر على طول المحور X ، المحور Y ، و XY على التوالي. رمز السكتات الدماغية والملء على النحو التالي:
var woodfill = ctx.createpattern (ImageTexture ، "REPERT") ؛
ctx.strokestyle = woodfill ؛
CTX.Stroketext ('Hello World!' ، 20 ، 200) ؛
// ملء المستطيل
ctx.fillstyle = woodfill ؛
CTX.FillRect (60 ، 240 ، 260 ، 440) ؛
صورة الملمس:
ثلاثة: تأثير العملية
شفرة:
<! doctype html>
<html>
<head>
<meta http-equiv = "x-ua compatible" content = "chrome = ie8">
<meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8">
<title> Canvas Fill and Stroke Text Demo </title>
<link href = "default.css" />
<script>
var ctx = null ؛ // سياق متغير عالمي 2D
var imagetexture = null ؛
window.onload = function () {
var canvas = document.getElementById ("text_canvas") ؛
console.log (canvas.parentnode.clientwidth) ؛
canvas.width = canvas.parentnode.clientwidth ؛
canvas.height = canvas.parentnode.clientheight ؛
if (! canvas.getContext) {
console.log ("قماش غير مدعوم. يرجى تثبيت متصفح متوافق مع HTML5.") ؛
يعود؛
}
// احصل على سياق ثنائي الأبعاد من القماش ورسم مستطيلة
ctx = canvas.getContext ("2d") ؛
ctx.fillStyle = "Black" ؛
ctx.fillRect (0 ، 0 ، canvas.width ، canvas.height) ؛
// ملء النص والسكتة الدماغية
ctx.font = '60pt calibri' ؛
ctx.linewidth = 3 ؛
ctx.strokestyle = 'الأخضر' ؛
ctx.stroketext ('Hello World!' ، 20 ، 100) ؛
ctx.fillstyle = 'red' ؛
ctx.filltext ('Hello World!' ، 20 ، 100) ؛
// ملء والسكتة الدماغية حسب النمط
ImageTexture = document.createElement ('img') ؛
ImageTexture.src = "../pattern.png" ؛
ImageTexture.onload = loaded () ؛
}
وظيفة تحميل () {
// التأخير في الصورة المحملة
setTimeout (texturefill ، 1000/30) ؛
}
وظيفة texturefill () {
// var woodfill = ctx.createpattern (ImageTexture ، "REFERT-X") ؛
// var woodfill = ctx.createpattern (ImageTexture ، "Repert-y") ؛
// var woodfill = ctx.createpattern (ImageTexture ، "no-repeat") ؛
var woodfill = ctx.createpattern (ImageTexture ، "REPERT") ؛
ctx.strokestyle = woodfill ؛
CTX.Stroketext ('Hello World!' ، 20 ، 200) ؛
// ملء المستطيل
ctx.fillstyle = woodfill ؛
CTX.FillRect (60 ، 240 ، 260 ، 440) ؛
}
</script>
</head>
<body>
<h1> HTML5 Canvas Text Demo - بواسطة Fish Fish </h1>
<pre> ملء والسكتة الدماغية </pre>
<viv>
<Canvas> </tanvas>
</div>
</body>
</html>