Contoh demonstrasi cara menggunakan kemahiran tutorial HTML5 Canvas shadow_html5

WBOY

Lepaskan： 2016-05-16 15:49:02

asal

1435 orang telah melayarinya

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:

Canvas-Clip-Demo

<script> var ctx = null; // globale Variable 2D-Kontext 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("Canvas wird nicht unterstützt. Bitte installieren Sie einen HTML5-kompatiblen Browser."); zurück; } var context = canvas.getContext('2d'); // Abschnitt eins – Schatten und Unschärfe 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("Leinwand verwischen", 40, 80); context.StrokeStyle = "RGBA(0, 255, 0, 1)"; context.lineWidth = 2; context.StrokeText("Leinwand verwischen", 40, 80); // Abschnitt zwei – Schattenschriftart 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("Leinwand verwischen", 40, 80 hh); // Abschnitt drei – Schatteneffekt nach unten var hh = canvas.height/4 hh; context.fillStyle="black"; context.fillRect(0, hh, canvas.width, canvas.height/4); for(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("Leinwand verwischen", 40, 80 hh); } // Abschnitt vier – Fade-Effekt var hh = canvas.height/4 hh; context.fillStyle="green"; context.fillRect(0, hh, Canvas.width, Canvas.height/4); for(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("Leinwand verwischen", 40, 80 hh); } for(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("Leinwand verwischen", 40, 80 hh); } for(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("Leinwand verwischen", 40, 80 hh); } for(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("Leinwand verwischen", 40, 80 hh); } } </script>

HTML5 Canvas Clip Demo – von Gloomy Fish

Füll- und Konturclip