ความคิดเห็น: บทความนี้ส่วนใหญ่แนะนำตัวอย่างของ HTML5 ที่มีการใช้เอฟเฟกต์เงาของผ้าใบ
ใช้เอฟเฟกต์ Shadow Canvas ใน HTML5
<! doctype html>
<html>
<head>
<meta http-equiv = "x-ua ที่เข้ากันได้" เนื้อหา = "chrome = ie8">
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> การสาธิตคลิป Canvas </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;
บริบท. 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;
บริบท. 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;
บริบท. 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;
บริบท. 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>
<div>
<Canvas> </sanvas>
</div>
</body>
</html>