Komentar: Artikel ini terutama memperkenalkan contoh html5 bahwa efek bayangan kanvas diimplementasikan
Menerapkan Efek Bayangan Kanvas di HTML5
<! 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> HTML5 Canvas </h1>
<pr Pre> Isi dan Stroke Clip </per>
<div>
<Canvas> </an Canvas>
</div>
</body>
</html>