Komentar: HTML5 Canvas menyediakan empat nilai atribut untuk mengatur bayangan untuk mewujudkan teks bayangan, efek tarik bayangan 3D, dan teks efek blur edge. Kode demonstrasi spesifik adalah sebagai berikut. Teman yang ingin belajar bisa merujuknya.
HTML5 Canvas menyediakan empat nilai atribut untuk pengaturan bayangan:context.shadowcolor = merah berarti mengatur warna bayangan menjadi merah
context.shadowoffsetx = 0 menunjukkan jarak horizontal bayangan relatif terhadap teks, 0 menunjukkan posisi horizontal dari dua tumpang tindih
Context.shadowoffsety = 0 menunjukkan jarak vertikal bayangan relatif terhadap teks, 0 menunjukkan posisi vertikal dari dua tumpang tindih
Context.ShadowBlur = 10 Efek Blu Shadow, semakin besar nilainya, semakin kabur.
Salah satu kode persegi panjang yang paling sederhana adalah sebagai berikut:
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.Fillrect (10, HH+10, 200, Canvas.Height/4-20);
Efeknya adalah sebagai berikut:
Teks Bayangan:
Cukup atur nilai -nilai ShadowoffsetX dan ShadowOffsety, ketika kedua nilai positif, bayangan relatif terhadap kanan bawah teks.
Offset persegi. Ketika semua nilai negatif, bayangan diimbangi dari sisi kiri atas teks.
Efek menarik bayangan 3D:
Ulangi teks untuk menggambar berulang kali pada posisi yang sama dan mengubah Shadowoffsetx, Shadowoffsety, Shadowblur
Nilai, yang terus bergeser dari kecil ke besar, dan transparansi terus meningkat. Lalu saya mendapatkan teks efek bayangan.
Teks Efek Blur Edge:
Ulangi dalam empat arah berdasarkan efek tarik bayangan 3D, dan efek teks bulu tepi diperoleh.
Efek Menjalankan:
Kode urutan:
<! Doctype html>
<Html>
<head>
<meta http-equiv = "x-ua-kompatibel" konten = "chrome = ie8">
<meta http-equiv = "tipe konten" content = "text/html; charset = utf-8">
<title> Demo klip kanvas </iteme>
<tautan href = "default.css" />
<script>
var ctx = null; // Konteks 2D Variabel Global
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 tidak didukung. Harap instal browser yang kompatibel HTML5.");
kembali;
}
var context = canvas.getContext ('2d');
// Bagian Satu - Bayangan dan Kabur
context.fillstyle = "hitam";
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);
// Bagian dua - font bayangan
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);
// Bagian Tiga - Down Shadow Effect
var hh = canvas.height/4 + hh;
context.fillstyle = "hitam";
Context.Fillrect (0, HH, Canvas.Width, Canvas.Height/4);
untuk (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);
}
// Bagian Empat - Efek Fade
var hh = canvas.height/4 + hh;
context.fillstyle = "hijau";
Context.Fillrect (0, HH, Canvas.Width, Canvas.Height/4);
untuk (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);
}
untuk (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);
}
untuk (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);
}
untuk (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> demo klip kanvas html5 - oleh ikan suram </h1>
<pr Pre> Isi dan Stroke Clip </per>
<div>
<Canvas> </an Canvas>
</div>
</body>
</html>