HTML5 Canvas陰影使用方法實(shí)例演示

2020-03-24 17:30:35

字體：大中小

供稿：網(wǎng)友

HTML5 Canvas中提供了設(shè)置陰影的四個(gè)屬性值分別為：
context.shadowColor = red 表示設(shè)置陰影顏色為紅色
context.shadowOffsetX = 0表示陰影相對(duì)TEXT的水平距離，0表示兩者水平位置重合
context.shadowOffsetY = 0表示陰影相對(duì)TEXT的垂直距離，0表示兩者垂直位置重合
context.shadowBlur = 10 陰影模糊效果，值越大模糊越厲害。
一個(gè)最簡(jiǎn)單的帶有陰影的矩形代碼如下：
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);
效果如下：

陰影文字：
只要設(shè)置shadowOffsetX與shadowOffsetY的值，當(dāng)值都正數(shù)時(shí)，陰影相對(duì)文字的右下
方偏移。當(dāng)值都為負(fù)數(shù)時(shí)，陰影相對(duì)文字的左上方偏移。
3D拉影效果：
在同一位置不斷的重復(fù)繪制文字同時(shí)改變shadowOffsetX、shadowOffsetY、shadowBlur
的值，從小到大不斷偏移不斷增加，透明度也不斷增加。就得到了拉影效果文字。
邊緣模糊效果文字：
在3D拉影效果的基礎(chǔ)上在四個(gè)方向重復(fù)，就得到了邊緣羽化的文字效果。
運(yùn)行效果：

序代碼：

復(fù)制代碼代碼如下:
!DOCTYPE html
html
head
meta http-equiv="X-UA-Compatible" content="chrome=IE8"
meta http-equiv="Content-type" content="text/html;charset=UTF-8"
title Canvas Clip Demo /title
link href="default.css" rel="stylesheet" /
script
var ctx = null; // global variable 2d context
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 not supported. Please install a HTML5 compatible browser.");
return;
}
var context = canvas.getContext('2d');
// section one - shadow and blur
context.fill ;
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);
// section two - shadow font
var hh = canvas.height/4;
context.fill ;
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);
// section three - down shadow effect
var hh = canvas.height/4 + hh;
context.fill ;
context.fillRect(0, hh, canvas.width, canvas.height/4);
for(var i = 0; i 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);
}
// section four - fade effect
var hh = canvas.height/4 + hh;
context.fill ;
context.fillRect(0, hh, canvas.width, canvas.height/4);
for(var i = 0; i 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);
}
for(var i = 0; i 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);
}
for(var i = 0; i 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);
}
for(var i = 0; i 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 Clip Demo - By Gloomy Fish /h1
pre Fill And Stroke Clip /pre
div id="my_painter"
canvas id="text_canvas" /canvas
/div
/body
/html
html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：html表格單元格內(nèi)容超出時(shí)顯示省略號(hào)效果

下一篇：html5 canvas移動(dòng)瀏覽器上實(shí)現(xiàn)圖片壓縮上傳