欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

實例講解使用HTML5 Canvas繪制陰影效果的方法

流浪的魚   發(fā)布時間：2016-03-25 11:04:41   作者：gloomyfish   我要評論
這篇文章主要介紹了使用HTML5 Canvas繪制陰影效果的方法,包括一個3D拉影+邊緣模糊效果文字的編寫例子,在陰影效果的利用上進一步深入,需要的朋友可以參考下

創(chuàng)建陰影效果需要操作以下4個屬性：

1.context.shadowColor：陰影顏色。
2.context.shadowOffsetX：陰影x軸位移。正值向右，負值向左。
3.context.shadowOffsetY：陰影y軸位移。正值向下，負值向上。
4.context.shadowBlur：陰影模糊濾鏡。數據越大，擴散程度越大。
這四個屬性只要設置了第一個和剩下三個中的任意一個就有陰影效果。不過通常情況下，四個屬性都要設置。

例如，創(chuàng)建一個向右下方位移各5px的紅色陰影，模糊2px，可以這樣寫。

JavaScript Code復制內容到剪貼板
  1. context.shadowColor = "red";   
  2. context.shadowOffsetX = 5;   
  3. context.shadowOffsetY = 5;   
  4. context.shadowBlur= 2;  

需要注意的是，這里的陰影同其他屬性設置一樣，都是基于狀態(tài)的設置。因此，如果只想為某一個對象應用陰影而不是全局陰影，需要在下次繪制前重置陰影的這四個屬性。
運行結果：
2016325110954383.jpg (850×500)

陰影文字：

只要設置shadowOffsetX與shadowOffsetY的值，當值都正數時，陰影相對文字的右下

方偏移。當值都為負數時，陰影相對文字的左上方偏移。

3D拉影效果：

在同一位置不斷的重復繪制文字同時改變shadowOffsetX、shadowOffsetY、shadowBlur

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

邊緣模糊效果文字：

在3D拉影效果的基礎上在四個方向重復，就得到了邊緣羽化的文字效果。

運行效果：
2016325111023538.jpg (472×470)

程序代碼：

JavaScript Code復制內容到剪貼板
  1. <!DOCTYPE html>     
  2. <html>     
  3. <head>     
  4. <meta http-equiv="X-UA-Compatible" content="chrome=IE8">     
  5. <meta http-equiv="Content-type" content="text/html;charset=UTF-8">     
  6. <title>Canvas Clip Demo</title>     
  7. <link href="default.css" rel="stylesheet" />     
  8.     <script>     
  9.         var ctx = null; // global variable 2d context     
  10.         var imageTexture = null;     
  11.         window.onload = function() {     
  12.             var canvas = document.getElementById("text_canvas");     
  13.             console.log(canvas.parentNode.clientWidth);     
  14.             canvas.width = canvas.parentNode.clientWidth;     
  15.             canvas.height = canvas.parentNode.clientHeight;     
  16.                  
  17.             if (!canvas.getContext) {     
  18.                 console.log("Canvas not supported. Please install a HTML5 compatible browser.");     
  19.                 return;     
  20.             }     
  21.             var context = canvas.getContext('2d');     
  22.                  
  23.             // section one - shadow and blur     
  24.             context.fillStyle="black";     
  25.             context.fillRect(0, 0, canvas.width, canvas.height/4);     
  26.             context.font = '60pt Calibri';     
  27.                  
  28.             context.shadowColor = "white";     
  29.             context.shadowOffsetX = 0;     
  30.             context.shadowOffsetY = 0;     
  31.             context.shadowBlur = 20;     
  32.             context.fillText("Blur Canvas", 40, 80);     
  33.             context.strokeStyle = "RGBA(0, 255, 0, 1)";     
  34.             context.lineWidth = 2;     
  35.             context.strokeText("Blur Canvas", 40, 80);     
  36.                  
  37.             // section two - shadow font     
  38.             var hh = canvas.height/4;     
  39.             context.fillStyle="white";     
  40.             context.fillRect(0, hh, canvas.width, canvas.height/4);     
  41.             context.font = '60pt Calibri';     
  42.                  
  43.             context.shadowColor = "RGBA(127,127,127,1)";     
  44.             context.shadowOffsetX = 3;     
  45.             context.shadowOffsetY = 3;     
  46.             context.shadowBlur = 0;     
  47.             context.fillStyle = "RGBA(0, 0, 0, 0.8)";     
  48.             context.fillText("Blur Canvas", 40, 80+hh);     
  49.                  
  50.             // section three - down shadow effect     
  51.             var hh = canvas.height/4 + hh;     
  52.             context.fillStyle="black";     
  53.             context.fillRect(0, hh, canvas.width, canvas.height/4);     
  54.             for(var i = 0; i < 10; i++)     
  55.             {     
  56.                 context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";     
  57.                 context.shadowOffsetX = i*2;     
  58.                 context.shadowOffsetY = i*2;     
  59.                 context.shadowBlur = i*2;     
  60.                 context.fillStyle = "RGBA(127, 127, 127, 1)";     
  61.                 context.fillText("Blur Canvas", 40, 80+hh);     
  62.             }     
  63.                  
  64.             // section four -  fade effect     
  65.             var hh = canvas.height/4 + hh;     
  66.             context.fillStyle="green";     
  67.             context.fillRect(0, hh, canvas.width, canvas.height/4);     
  68.             for(var i = 0; i < 10; i++)     
  69.             {     
  70.                 context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";     
  71.                 context.shadowOffsetX = 0;     
  72.                 context.shadowOffsetY = -i*2;     
  73.                 context.shadowBlur = i*2;     
  74.                 context.fillStyle = "RGBA(127, 127, 127, 1)";     
  75.                 context.fillText("Blur Canvas", 40, 80+hh);     
  76.             }     
  77.             for(var i = 0; i < 10; i++)     
  78.             {     
  79.                 context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";     
  80.                 context.shadowOffsetX = 0;     
  81.                 context.shadowOffsetY = i*2;     
  82.                 context.shadowBlur = i*2;     
  83.                 context.fillStyle = "RGBA(127, 127, 127, 1)";     
  84.                 context.fillText("Blur Canvas", 40, 80+hh);     
  85.             }     
  86.             for(var i = 0; i < 10; i++)     
  87.             {     
  88.                 context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";     
  89.                 context.shadowOffsetX = i*2;     
  90.                 context.shadowOffsetY = 0;     
  91.                 context.shadowBlur = i*2;     
  92.                 context.fillStyle = "RGBA(127, 127, 127, 1)";     
  93.                 context.fillText("Blur Canvas", 40, 80+hh);     
  94.             }     
  95.             for(var i = 0; i < 10; i++)     
  96.             {     
  97.                 context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";     
  98.                 context.shadowOffsetX = -i*2;     
  99.                 context.shadowOffsetY = 0;     
  100.                 context.shadowBlur = i*2;     
  101.                 context.fillStyle = "RGBA(127, 127, 127, 1)";     
  102.                 context.fillText("Blur Canvas", 40, 80+hh);     
  103.             }     
  104.         }     
  105.              
  106.     </script>     
  107. </head>     
  108. <body>     
  109.     <h1>HTML5 Canvas Clip Demo - By Gloomy Fish</h1>     
  110.     <pre>Fill And Stroke Clip</pre>     
  111.     <div id="my_painter">     
  112.         <canvas id="text_canvas"></canvas>     
  113.     </div>     
  114. </body>     
  115. </html>    

相關文章

  • canvas 陰影和圖形變換的示例代碼

    這篇文章主要介紹了canvas 陰影和圖形變換的示例代碼的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-02

  • HTML5 canvas基本繪圖之繪制陰影效果

    <canvas></canvas>是HTML5中新增的標簽，用于繪制圖形，這篇文章主要為大家詳細介紹了HTML5 canvas基本繪圖之繪制陰影方法，感興趣的小伙伴們可以參考一下
    2016-06-27

  • html5實現(xiàn)canvas陰影效果示例

    這篇文章主要介紹了html5實現(xiàn)canvas陰影效果示例
    2014-05-07

  • HTML5 Canvas陰影使用方法實例演示

    HTML5 Canvas中提供了設置陰影的四個屬性值可以實現(xiàn)陰影文字、3D拉影效果、邊緣模糊效果文字，具體的演示代碼如下，想學習的朋友可以參考下
    2013-08-02

  • canvas多重陰影發(fā)光效果實現(xiàn)

    這篇文章主要介紹了canvas多重陰影發(fā)光效果實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習
    2021-04-19

最新評論