Contoh melaksanakan kesan bayangan kanvas dalam kemahiran tutorial html5_html5

Melaksanakan kesan bayangan Kanvas dalam HTML5

Salin kod

Kod tersebut adalah seperti berikut:

< ;link href="default.css" rel="stylesheet" />

var ctx = null; // konteks 2d pembolehubah 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;

jika (!canvas.getContext) {
console.log ("Kanvas tidak disokong. Sila pasang penyemak imbas yang serasi dengan HTML5.");
return;
}
var context = canvas.getContext('2d');

// bahagian satu - bayang dan kabur
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("Kaburkan Kanvas ", 40, 80);
context.strokeStyle = "RGBA(0, 255, 0, 1)";
context.lineWidth = 2;
context.strokeText("Kabur Kanvas", 40, 80);

// bahagian dua - fon 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);

// bahagian tiga - kesan bayang bawah
var hh = canvas.height/4 hh;
context.fillStyle="black";
konteks. 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("Kabur Kanvas" , 40, 80 hh);
}

// bahagian empat - kesan pudar
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("Kaburkan Kanvas", 40, 80 hh);
}
untuk( var i = 0; i < 10; i )
{
context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10) ")";
context.shadowOffsetX = 0;
konteks. shadowOffsetY = i*2;
context.shadowBlur = i*2;
context.fillStyle = "RGBA(127, 127, 127, 1)";
context.fillText("Kabur Kanvas", 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("Kabur Kanvas", 40, 80 hh);
}
untuk(var i = 0; i < 10; i )
{
context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10) ")";
context.shadowOffsetX = -i*2;
konteks .shadowOffsetY = 0;
context.shadowBlur = i*2;
context.fillStyle = "RGBA(127, 127, 127, 1)";
context.fillText("Kabur Kanvas", 40, 80 hh);
}
}

< ;/skrip>

Kanvas HTML5

Klip Isi Dan Strok<🎜