Contoh demonstrasi cara menggunakan kemahiran tutorial HTML5 Canvas shadow_html5

HTML5 Canvas menyediakan empat nilai atribut untuk menetapkan bayang-bayang:
context.shadowColor = "red" bermaksud menetapkan warna bayang-bayang kepada merah
context.shadowOffsetX = 0 bermaksud jarak mendatar bayang-bayang berbanding TEXT, 0 bermaksud dua Kedudukan mendatar bertindih
konteks.shadowOffsetY = 0 bermaksud jarak menegak bayang-bayang berbanding TEKS, 0 bermaksud kedudukan menegak kedua-duanya bertepatan
konteks.shadowBlur = 10 Kesan kabur bayang-bayang, semakin besar nilainya, makin teruk blur.
Kod segi empat tepat yang paling mudah dengan bayang-bayang adalah seperti berikut:
context.shadowColor = "RGBA(127,127,127,1)"; context.shadowBlur = 0;
context.fillStyle = "RGBA(0, 0, 0, 0.8)"
context.fillRect(10, hh 10, 200,canvas.height/4-20) ; 🎜>Kesannya adalah seperti berikut:



Teks bayangan:
Hanya tetapkan nilai shadowOffsetX dan shadowOffsetY apabila nilai kedua-duanya positif , bayang akan relatif kepada bahagian bawah sebelah kanan teks
Square offset. Apabila nilai semuanya negatif, bayang-bayang diimbangi berbanding dengan kiri atas teks. Kesan bayang 3D:

Lukis teks berulang kali pada kedudukan yang sama sambil menukar nilai shadowOffsetX, shadowOffsetY dan shadowBlur
Dari kecil kepada besar, offset terus meningkat , dan ketelusan juga berterusan. Anda mendapat teks kesan bayang-bayang. Teks kesan kabur tepi:

Ulang dalam empat arah berdasarkan kesan bayang-bayang 3D untuk mendapatkan kesan teks berbulu tepi.
Kesan berjalan:
Kod jujukan:




Salin kod

Kod tersebut ialah seperti berikut:

<script> <br>var ctx = null; // globale Variable 2D-Kontext <br>var imageTexture = null; <br>window.onload = function() { <br>var canvas = document.getElementById("text_canvas"); <br>console.log(canvas.parentNode.clientWidth); <br>canvas.width = canvas.parentNode.clientWidth; <br>canvas.height = canvas.parentNode.clientHeight; <br>if (!canvas.getContext) { <br>console.log("Canvas wird nicht unterstützt. Bitte installieren Sie einen HTML5-kompatiblen Browser."); <br>zurück; <br>} <br>var context = canvas.getContext('2d'); <br>// Abschnitt eins – Schatten und Unschärfe <br>context.fillStyle="black"; <br>context.fillRect(0, 0, Canvas.width, Canvas.height/4); <br>context.font = '60pt Calibri'; <br>context.shadowColor = "white"; <br>context.shadowOffsetX = 0; <br>context.shadowOffsetY = 0; <br>context.shadowBlur = 20; <br>context.fillText("Leinwand verwischen", 40, 80); <br>context.StrokeStyle = "RGBA(0, 255, 0, 1)"; <br>context.lineWidth = 2; <br>context.StrokeText("Leinwand verwischen", 40, 80); <br>// Abschnitt zwei – Schattenschriftart <br>var hh = canvas.height/4; <br>context.fillStyle="white"; <br>context.fillRect(0, hh, Canvas.width, Canvas.height/4); <br>context.font = '60pt Calibri'; <br>context.shadowColor = "RGBA(127,127,127,1)"; <br>context.shadowOffsetX = 3; <br>context.shadowOffsetY = 3; <br>context.shadowBlur = 0; <br>context.fillStyle = "RGBA(0, 0, 0, 0.8)"; <br>context.fillText("Leinwand verwischen", 40, 80 hh); <br>// Abschnitt drei – Schatteneffekt nach unten <br>var hh = canvas.height/4 hh; <br>context.fillStyle="black"; <br>context.fillRect(0, hh, canvas.width, canvas.height/4); <br>for(var i = 0; i < 10; i ) <br />{ <br />context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10) ")" ; <br />context.shadowOffsetX = i*2; <br />context.shadowOffsetY = i*2; <br />context.shadowBlur = i*2; <br />context.fillStyle = "RGBA(127, 127, 127, 1)"; <br />context.fillText("Leinwand verwischen", 40, 80 hh); <br />} <br />// Abschnitt vier – Fade-Effekt <br />var hh = canvas.height/4 hh; <br />context.fillStyle="green"; <br />context.fillRect(0, hh, Canvas.width, Canvas.height/4); <br />for(var i = 0; i < 10; i ) <br />{ <br />context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10) ")" ; <br />context.shadowOffsetX = 0; <br />context.shadowOffsetY = -i*2; <br />context.shadowBlur = i*2; <br />context.fillStyle = "RGBA(127, 127, 127, 1)"; <br />context.fillText("Leinwand verwischen", 40, 80 hh); <br />} <br />for(var i = 0; i < 10; i ) <br />{ <br />context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10 ) ")"; <br />context.shadowOffsetX = 0; <br />context.shadowOffsetY = i*2; <br />context.shadowBlur = i*2; <br />context.fillStyle = "RGBA(127, 127, 127, 1)"; <br />context.fillText("Leinwand verwischen", 40, 80 hh); <br />} <br />for(var i = 0; i < 10; i ) <br />{ <br />context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10 ) ")"; <br />context.shadowOffsetX = i*2; <br />context.shadowOffsetY = 0; <br />context.shadowBlur = i*2; <br />context.fillStyle = "RGBA(127, 127, 127, 1)"; <br />context.fillText("Leinwand verwischen", 40, 80 hh); <br />} <br />for(var i = 0; i < 10; i ) <br />{ <br />context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10 ) ")"; <br />context.shadowOffsetX = -i*2; <br />context.shadowOffsetY = 0; <br />context.shadowBlur = i*2; <br />context.fillStyle = "RGBA(127, 127, 127, 1)"; <br />context.fillText("Leinwand verwischen", 40, 80 hh); <br />} <br />} <br /></script>

HTML5 Canvas Clip Demo – von Gloomy Fish

Füll- und Konturclip