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

2020-03-24 16:25:20

字體：大中小

來源：轉載

供稿：網友

創建陰影效果需要操作以下4個屬性：1.context.shadowColor：陰影顏色。
2.context.shadowOffsetX：陰影x軸位移。正值向右，負值向左。
3.context.shadowOffsetY：陰影y軸位移。正值向下，負值向上。
4.context.shadowBlur：陰影模糊濾鏡。數據越大，擴散程度越大。
這四個屬性只要設置了第一個和剩下三個中的任意一個就有陰影效果。不過通常情況下，四個屬性都要設置。例如，創建一個向右下方位移各5px的紅色陰影，模糊2px，可以這樣寫。JavaScript Code復制內容到剪貼板
context.shadowColor= red ; context.shadowOffsetX=5; context.shadowOffsetY=5; context.shadowBlur=2;
需要注意的是，這里的陰影同其他屬性設置一樣，都是基于狀態的設置。因此，如果只想為某一個對象應用陰影而不是全局陰影，需要在下次繪制前重置陰影的這四個屬性。
運行結果：
陰影文字：只要設置shadowOffsetX與shadowOffsetY的值，當值都正數時，陰影相對文字的右下方偏移。當值都為負數時，陰影相對文字的左上方偏移。3D拉影效果：在同一位置不斷的重復繪制文字同時改變shadowOffsetX、shadowOffsetY、shadowBlur的值，從小到大不斷偏移不斷增加，透明度也不斷增加。就得到了拉影效果文字。邊緣模糊效果文字：在3D拉影效果的基礎上在四個方向重復，就得到了邊緣羽化的文字效果。運行效果：
html' target='_blank'>程序代碼：JavaScript Code復制內容到剪貼板
head metahttp-equiv= X-UA-Compatible content= chrome=IE8 metahttp-equiv= Content-type content= text/html;charset=UTF-8 title CanvasClipDemo /title linkhref= default.css rel= stylesheet / script varctx=null;//globalvariable2dcontext varimageTexture=null; window.onload=function(){ varcanvas=document.getElementById( text_canvas ); console.log(canvas.parentNode.clientWidth); canvas.width=canvas.parentNode.clientWidth; canvas.height=canvas.parentNode.clientHeight; if(!canvas.getContext){ console.log( Canvasnotsupported.PleaseinstallaHTML5compatiblebrowser. ); return; } varcontext=canvas.getContext('2d'); //sectionone-shadowandblur context.fill '60ptCalibri'; context.shadowColor= white ; context.shadowOffsetX=0; context.shadowOffsetY=0; context.shadowBlur=20; context.fillText( BlurCanvas ,40,80); context.strokeStyle= RGBA(0,255,0,1) ; context.lineWidth=2; context.strokeText( BlurCanvas ,40,80); //sectiontwo-shadowfont varhh=canvas.height/4; context.fill '60ptCalibri'; 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( BlurCanvas ,40,80+hh); //sectionthree-downshadoweffect varhh=canvas.height/4+hh; context.fill >html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html marquee標簽如何實現上下滾動，marquee標簽的滾動速度設置

下一篇：Html5實現如何在兩個div元素之間拖放圖像