HTML5 Canvas阴影使用方法实例演示

更新时间:2023-04-06 17:04:33 阅读：评论：0

html5 canvas中提供了设置阴影的四个属性值分别为：

context.shadowcolor = “red” 表示设置阴影颜色为红色

context.shadowofftx = 0表示阴影相对text的水平距离，0表示两者水平位置重合

context.shadowoffty = 0表示阴影相对text的垂直距离，0表示两者垂直位置重合

context.shadowblur = 10 阴影模糊效果，值越大模糊越厉害。

一个最简单的带有阴影的矩形代码如下：

context.shadowcolor = “rgba(127,127,127,1)”;

context.shadowofftx = 3;

context.shadowoffty = 3;

context.shadowblur = 0;

context.fillstyle = “rgba(0, 0, 0, 0.8)”;

context.fillrect(10, hh+10, 200,canvas.height/4-20);

效果如下：

阴影文字：

只要设置shadowofftx与shadowoffty的值，当值都正数时，阴影相对文字的右下

方偏移。当值都为负数时，阴影相对文字的左上方偏移。

3d拉影效果：

在同一位置不断的重复绘制文字同时改变shadowofftx、shadowoffty、shadowblur

的值，从小到大不断偏移不断增加，透明度也不断增加。就得到了拉影效果文字。

边缘模糊效果文字：

在3d拉影效果的基础上在四个方向重复，就得到了边缘羽化的文字效果。

运行效果：

序代码：

复制代码代码如下:

<!doctype html>

<html>

<head>

<meta http-equiv=”x-ua-compatible” content=”chrome=ie8″>

<meta http-equiv=”content-type” content=”text/html;chart=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;

can2018元旦vas.height = canvas.parentnode.clientheight;

if (!canvas.getcontext) {

console.log(“canvas not supported. plea install a html5 compatible browr.”);

return;

}

var context = canvas.getcontext(‘2d’);

// ction one – shadow and blur

context.fillstyle=”black”;

context.fillrect(0, 0, canvas.width, canvas.height/4);

context.font = ’60pt calibri’;

context.shadowcolor = “white”;

context.shadowofftx = 0;

context.shadowoffty = 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);

// ction two – shadow font

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.shadowofftx = 3;

context.shadowoffty = 3;

context.shadowblur = 0;

context.fillstyle = “rgba(0, 0, 0, 0.8)”;

context.filltext(“blur canvas”, 40, 80+hh);

// ction three – down shadow effect

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.shadowofftx = i*2;

context.shadowoffty = i*2;

context.shadowblur = i*2;

context.fillstyle = “rgba(127, 127, 127, 1)”;

context.filltext(“blur canvas”, 40, 80+hh);

}

// ction four – fade effect

var hh = canvas.height/4 + hh;

context.fillstyle=”green&自己在家赚钱#8221;;

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.shadowofftx = 0;

context.shadowoffty = -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 < 10; i++)

{

context.shadowcolor = “rgba(255, 255, 255,R家庭困难类型21; + ((10-i)/10) + “)”;

context.shadowofftx = 0;

context.shadowoffty = 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 < 10; i++)

{

context.shadowcolor = “rgba(255, 255, 255,” + ((10-i)/10) + “)”;

context.shadowofftx = i*2;

context.shadowoffty = 0;

context.shadowblur = i*2;

context.fillstyle = “rgba(127, 127, 127, 1)”;

context.filltext(“blur canvas”, 40, 80+hh);

}

for(var i = 0; i < 10; i++)

{

context.shadowcolor = “rgba(255, 255, 255,” + ((10-i)/10) + “)”;

context.shadowofftx = -i*2;

context.shadowoffty = 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>