التعليق: يوفر HTML5 Canvas أربع قيم سمات لضبط الظلال لتحقيق نص الظل ، وتأثير سحب الظل ثلاثي الأبعاد ، ونص تأثير طمس الحافة. رمز العرض المحدد هو كما يلي. يمكن للأصدقاء الذين يرغبون في التعلم الرجوع إليه.
يوفر HTML5 Canvas أربع قيم سمات لإعداد الظلال:context.shadowColor = Red يعني ضبط لون الظل على اللون الأحمر
context.shadowoffsetx = 0 يشير إلى المسافة الأفقية للظل بالنسبة للنص ، يشير 0 إلى المواضع الأفقية للتراكبين
context.shadowoffsety = 0 يشير إلى المسافة الرأسية للظل بالنسبة للنص ، يشير 0 إلى المواضع الرأسية للالتحاق بالتداخل
context.shadowblur = 10 تأثير ضباب الظل ، كلما زادت القيمة ، كلما زادت ضبابية.
واحدة من أبسط رموز المستطيل المظللة هي كما يلي:
context.shadowColor = RGBA (127،127،127،1) ؛
context.shadowoffsetx = 3 ؛
context.shadowoffsety = 3 ؛
context.shadowblur = 0 ؛
context.fillStyle = RGBA (0 ، 0 ، 0 ، 0.8) ؛
context.fillRect (10 ، HH+10 ، 200 ، canvas.Height/4-20) ؛
الآثار هي كما يلي:
نص الظل:
ما عليك سوى تعيين قيم ShadowOffsetX و Shadowoffsety ، عندما تكون كلتا القيمتين موجبة ، يكون الظل بالنسبة إلى أسفل النص السفلي من النص.
إزاحة مربع. عندما تكون جميع القيم سالبة ، يتم تعويض الظل من الجانب الأيسر العلوي من النص.
3D Shadow سحب تأثير:
كرر النص للرسم مرارًا وتكرارًا في نفس الموضع وتغيير ShadowoffsetX ، Shadowoffsety ، Shadowblur
قيمة ، التي تتحول باستمرار من صغيرة إلى كبيرة ، وتستمر شفافيةها في الزيادة. ثم حصلت على نص تأثير الظل.
نص تأثير طمس الحافة:
كرر في أربعة اتجاهات بناءً على تأثير سحب الظل ثلاثي الأبعاد ، ويتم الحصول على تأثير نص ريش الحافة.
تأثير الجري:
رمز التسلسل:
<! 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 Clip 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.") ؛
يعود؛
}
var context = canvas.getContext ('2d') ؛
// القسم الأول - الظل وطمس
context.fillStyle = "Black" ؛
context.fillRect (0 ، 0 ، canvas.width ، canvas.height/4) ؛
context.font = '60pt calibri' ؛
context.shadowColor = "White" ؛
context.shadowoffsetx = 0 ؛
context.shadowoffsety = 0 ؛
context.shadowblur = 20 ؛
context.fillText ("Blur Canvas" ، 40 ، 80) ؛
context.strokestyle = "rgba (0 ، 255 ، 0 ، 1)" ؛
context.linewidth = 2 ؛
Context.Stroketext ("Blur Canvas" ، 40 ، 80) ؛
// القسم الثاني - خط الظل
var hh = canvas.height/4 ؛
context.fillStyle = "White" ؛
context.fillRect (0 ، hh ، canvas.width ، canvas.height/4) ؛
context.font = '60pt calibri' ؛
Context.shadowColor = "RGBA (127،127،127،1)" ؛
context.shadowoffsetx = 3 ؛
context.shadowoffsety = 3 ؛
context.shadowblur = 0 ؛
context.fillStyle = "RGBA (0 ، 0 ، 0 ، 0.8)" ؛
context.fillText ("Blur Canvas" ، 40 ، 80+HH) ؛
// القسم الثالث - تأثير الظل لأسفل
var hh = canvas.height/4 + hh ؛
context.fillStyle = "Black" ؛
context.fillRect (0 ، hh ، canvas.width ، canvas.height/4) ؛
لـ (var i = 0 ؛ i <10 ؛ i ++)
{
context.shadowColor = "RGBA (255 ، 255 ، 255 ،" + ((10-I)/10) + ")" ؛
context.shadowoffsetx = i*2 ؛
context.shadowoffsety = i*2 ؛
context.shadowblur = i*2 ؛
context.fillStyle = "RGBA (127 ، 127 ، 127 ، 1)" ؛
context.fillText ("Blur Canvas" ، 40 ، 80+HH) ؛
}
// القسم الرابع - تأثير التلاشي
var hh = canvas.height/4 + hh ؛
context.fillStyle = "Green" ؛
context.fillRect (0 ، hh ، canvas.width ، canvas.height/4) ؛
لـ (var i = 0 ؛ i <10 ؛ i ++)
{
context.shadowColor = "RGBA (255 ، 255 ، 255 ،" + ((10-I)/10) + ")" ؛
context.shadowoffsetx = 0 ؛
context.shadowoffsety = -i*2 ؛
context.shadowblur = i*2 ؛
context.fillStyle = "RGBA (127 ، 127 ، 127 ، 1)" ؛
context.fillText ("Blur Canvas" ، 40 ، 80+HH) ؛
}
لـ (var i = 0 ؛ i <10 ؛ i ++)
{
context.shadowColor = "RGBA (255 ، 255 ، 255 ،" + ((10-I)/10) + ")" ؛
context.shadowoffsetx = 0 ؛
context.shadowoffsety = i*2 ؛
context.shadowblur = i*2 ؛
context.fillStyle = "RGBA (127 ، 127 ، 127 ، 1)" ؛
context.fillText ("Blur Canvas" ، 40 ، 80+HH) ؛
}
لـ (var i = 0 ؛ i <10 ؛ i ++)
{
context.shadowColor = "RGBA (255 ، 255 ، 255 ،" + ((10-I)/10) + ")" ؛
context.shadowoffsetx = i*2 ؛
context.shadowoffsety = 0 ؛
context.shadowblur = i*2 ؛
context.fillStyle = "RGBA (127 ، 127 ، 127 ، 1)" ؛
context.fillText ("Blur Canvas" ، 40 ، 80+HH) ؛
}
لـ (var i = 0 ؛ i <10 ؛ i ++)
{
context.shadowColor = "RGBA (255 ، 255 ، 255 ،" + ((10-I)/10) + ")" ؛
context.shadowoffsetx = -i*2 ؛
context.shadowoffsety = 0 ؛
context.shadowblur = i*2 ؛
context.fillStyle = "RGBA (127 ، 127 ، 127 ، 1)" ؛
context.fillText ("Blur Canvas" ، 40 ، 80+HH) ؛
}
}
</script>
</head>
<body>
<h1> HTML5 Canvas Clip Demo - بواسطة الأسماك القاتمة </h1>
<pre> مقطع ملء وسكتة دماغية </pre>
<viv>
<Canvas> </tanvas>
</div>
</body>
</html>