HTML5 Canvas阴影用法演示

简介: HTML5 Canvas阴影用法演示

HTML5 Canvas阴影用法演示


HTML5 Canvas中提供了设置阴影的四个属性值分别为:


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


context.shadowOffsetX = 0表示阴影相对TEXT的水平距离,0表示两者水平位置重合


context.shadowOffsetY = 0表示阴影相对TEXT的垂直距离,0表示两者垂直位置重合


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


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


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);

效果如下:


阴影文字:

只要设置shadowOffsetX与shadowOffsetY的值,当值都正数时,阴影相对文字的右下

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

3D拉影效果:

在同一位置不断的重复绘制文字同时改变shadowOffsetX、shadowOffsetY、shadowBlur

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

边缘模糊效果文字:

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

运行效果:


程序代码:

<!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.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("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.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);
      
      // section 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.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.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("Blur Canvas", 40, 80+hh);
      }
      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("Blur Canvas", 40, 80+hh);
      }
      for(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);
      }
      for(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 Clip Demo - By Gloomy Fish</h1>
  <pre>Fill And Stroke Clip</pre>
  <div id="my_painter">
    <canvas id="text_canvas"></canvas>
  </div>
</body>
</html>

转载请注明

相关文章
|
1月前
|
移动开发 前端开发 JavaScript
纯HTML5 Canvas实现的饼图
纯HTML5 Canvas实现的饼图
23 6
|
1月前
|
移动开发 前端开发 HTML5
HTML5 Canvas中实现绘制一个像素宽的细线
HTML5 Canvas中实现绘制一个像素宽的细线
21 3
|
1月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
23 3
|
1月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas实现360度全景图
HTML5 Canvas实现360度全景图
22 1
|
1月前
|
移动开发 前端开发 JavaScript
浏览器端图表渲染技术SVG, VML HTML Canvas
浏览器端图表渲染技术SVG, VML HTML Canvas
17 0
|
移动开发 前端开发 API
《HTML5 Canvas游戏开发实战》——3.4 小结
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.4节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
952 0
|
移动开发 JavaScript 前端开发
《HTML5 Canvas游戏开发实战》——3.3 自定义画板
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.3节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1321 0
|
移动开发 JavaScript 前端开发
《HTML5 Canvas游戏开发实战》——3.2 图形的渲染
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.2节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1222 0
|
移动开发 JavaScript 前端开发
《HTML5 Canvas游戏开发实战》——3.1 变形
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.1节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1006 0