تعليق: يقدم هذا المقال بشكل أساسي أمثلة على HTML5 التي يتم تنفيذ تأثير ظل اللوحة القماشية
تنفيذ تأثير الظل قماش في HTML5
<! 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 </h1>
<pre> مقطع ملء وسكتة دماغية </pre>
<viv>
<Canvas> </tanvas>
</div>
</body>
</html>