html5中怎么利用canvas實現(xiàn)陰影效果-創(chuàng)新互聯(lián)

這篇文章將為大家詳細講解有關html5中怎么利用canvas實現(xiàn)陰影效果，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

我們提供的服務有：做網(wǎng)站、成都做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、茂南ssl等。為千余家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的茂南網(wǎng)站制作公司

代碼如下:


<!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>
   <h2>HTML5 Canvas</h2>
   <pre>Fill And Stroke Clip</pre>
   <div id="my_painter">
       <canvas id="text_canvas"></canvas>
   </div>
</body>
</html>


關于html5中怎么利用canvas實現(xiàn)陰影效果就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

分享題目：html5中怎么利用canvas實現(xiàn)陰影效果-創(chuàng)新互聯(lián)
本文路徑：http://bm7419.com/article30/dicdpo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、ChatGPT、軟件開發(fā)、靜態(tài)網(wǎng)站、域名注冊、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設