ความคิดเห็น: HTML5 Canvas ให้ค่าแอตทริบิวต์สี่ค่าสำหรับการตั้งค่าเงาเพื่อรับรู้ข้อความเงาเอฟเฟกต์การดึงเงา 3D และข้อความเอฟเฟกต์เบลอขอบ รหัสสาธิตเฉพาะมีดังนี้ เพื่อนที่ต้องการเรียนรู้สามารถอ้างถึงได้
HTML5 Canvas ให้ค่าแอตทริบิวต์สี่ค่าสำหรับการตั้งค่าเงา:context.shadowColor = สีแดงหมายถึงการตั้งค่าสีเงาเป็นสีแดง
context.shadowoffsetx = 0 หมายถึงระยะทางแนวนอนของเงาที่สัมพันธ์กับข้อความ 0 หมายถึงตำแหน่งแนวนอนของทั้งสองซ้อนทับ
Context.shadowoffsety = 0 หมายถึงระยะทางแนวตั้งของเงาที่สัมพันธ์กับข้อความ 0 หมายถึงตำแหน่งแนวตั้งของทั้งสองซ้อนทับ
Context.shadowblur = 10 เอฟเฟกต์เงาเงายิ่งค่าที่ใหญ่ขึ้นเท่าไหร่ก็ยิ่งเบลอมากขึ้นเท่านั้น
หนึ่งในรหัสสี่เหลี่ยมเงาที่ง่ายที่สุดมีดังนี้:
Context.ShadowColor = RGBA (127,127,127,1);
Context.ShadowOffsetx = 3;
บริบท. 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:
ทำซ้ำข้อความเพื่อวาดซ้ำ ๆ ที่ตำแหน่งเดียวกันและเปลี่ยน shadowoffsetx, shadowoffsety, shadowblur
มูลค่าของซึ่งเปลี่ยนจากขนาดเล็กไปยังใหญ่และความโปร่งใสยังคงเพิ่มขึ้นอย่างต่อเนื่อง จากนั้นฉันได้รับข้อความเงา
ข้อความเอฟเฟกต์เบลอขอบ:
ทำซ้ำในสี่ทิศทางขึ้นอยู่กับเอฟเฟกต์การดึงเงา 3 มิติและได้รับเอฟเฟกต์ข้อความของขอบขนที่ขอบ
เอฟเฟกต์การทำงาน:
รหัสลำดับ:
<! 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 CLIP DEMO - โดยปลาที่มืดมน </H1>
<pre> กรอกและคลิปจังหวะ </pre>
<div>
<Canvas> </sanvas>
</div>
</body>
</html>