JavaScript canvas實(shí)現(xiàn)帶有陰影的圖形和文字

更新時(shí)間：2021年03月16日 17:23:31 作者：believehxl

這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)帶有陰影的圖形和文字，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

用canvas創(chuàng)建帶有陰影的圖形和文字，供大家參考，具體內(nèi)容如下

ctx.shadowBlur=20;設(shè)置陰影模糊范圍。
ctx.shadowColor;設(shè)置陰影模糊顏色。

還可以利用

shadowOffsetX屬性設(shè)置陰影與圖形的水平距離。
shadowOffsetY屬性設(shè)置陰影與圖形的垂直距離。

代碼：

<!DOCTYPE html>
<html>
<head>
 <title>創(chuàng)建帶有陰影的圖形和文字</title>
</head>
<body>
<h3 align="center">放射狀漸變色</h3>
<hr>
<canvas id="myc1" width="800" height="600"></canvas>
<script type="text/javascript">
 var myc = document.getElementById("myc1");//繪制一個(gè)新畫(huà)布
 var ctx = myc.getContext("2d"); //設(shè)置繪圖環(huán)境為2d
 var myg = ctx.createRadialGradient(130,200,0,130,200,90);
 //addColorStop方法 第一個(gè)參數(shù)為圖像內(nèi)的百分比 第二個(gè)參數(shù)為顏色
 myg.addColorStop(0,"white");
 myg.addColorStop(0.5,"pink"); 
 myg.addColorStop(0.6,"green");
 myg.addColorStop(0.4,"blue");
 ctx.fillStyle=myg;
 ctx.shadowColor="black"; //陰影顏色
 ctx.shadowBlur=20; //陰影模糊范圍
 ctx.arc(130,200,100,0,Math.PI*2); //繪制一個(gè)新圓
 ctx.fill();

 ctx.beginPath();
 var myg1 = ctx.createRadialGradient(550,250,50,550,250,200);
 myg1.addColorStop(0,"blue");
 myg1.addColorStop(0.6,"green");
 myg1.addColorStop(1,"red");
 ctx.fillStyle=myg1; 
 ctx.font="50px 黑體"; //設(shè)置字體大小和字體樣式
 ctx.shadowBlur=50; //設(shè)置陰影模糊范圍
 ctx.shadowColor="yellow";//陰影顏色；
 ctx.shadowOffsetX=30; //水平方向網(wǎng)上偏移；
 ctx.shadowOffsetY=-30;//垂直方向往下偏移；
 ctx.fillText("放射性漸變文字",350,200);


</script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

多個(gè)表單中如何獲得這個(gè)文件上傳的網(wǎng)址實(shí)現(xiàn)js代碼
假設(shè)一個(gè)網(wǎng)頁(yè)里有多個(gè)表單，其中一個(gè)表單里有文件上傳，問(wèn)題是如何獲得這個(gè)文件上傳的網(wǎng)址呢，接下來(lái)為大家介紹下實(shí)現(xiàn)的js代碼，感興趣的朋友可以參考下哈，希望可以幫助到你
2013-03-03
JavaScript canvas實(shí)現(xiàn)流星特效
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)流星特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
JavaScript中btoa和atob全局函數(shù)示例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中btoa和atob全局函數(shù)的相關(guān)資料,atob和btoa是window對(duì)象的兩個(gè)函數(shù),用來(lái)編碼解碼Base64,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-08-08
Bootstrap按鈕組件詳解
按鈕組和下拉菜單組件一樣，需要依賴于button.js插件才能正常運(yùn)作。通過(guò)本文給大家詳細(xì)介紹Bootstrap按鈕組件，感興趣的朋友一起學(xué)習(xí)吧
2016-04-04
uni-app微信小程序之紅包雨活動(dòng)完整源碼
最近公司需求做一個(gè)微信紅包雨功能,這里給大家總結(jié)下實(shí)現(xiàn)的方法,這篇文章主要給大家介紹了關(guān)于uni-app微信小程序之紅包雨活動(dòng)的相關(guān)資料,需要的朋友可以參考下
2024-01-01
類似于QQ的右滑刪除效果的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇類似于QQ的右滑刪除效果的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
js獲得頁(yè)面的高度和寬度的方法
做一個(gè)彈出dialog時(shí)用到了取父頁(yè)面的寬度和高度的方法,需要的朋友可以參考下
2014-02-02
基于代數(shù)方程庫(kù)Algebra.js解二元一次方程功能示例
這篇文章主要介紹了基于代數(shù)方程庫(kù)Algebra.js解二元一次方程功能,結(jié)合具體實(shí)例形式分析了方程庫(kù)Algebra.js計(jì)算方程的具體使用技巧,需要的朋友可以參考下
2017-06-06
前端MQTT詳細(xì)使用的兩種方法
MQTT(消息隊(duì)列遙測(cè)傳輸協(xié)議),是一種基于發(fā)布/訂閱(publish/subscribe)模式的通訊協(xié)議,該協(xié)議構(gòu)建于TCP/IP協(xié)議上,這篇文章主要給大家介紹了關(guān)于前端MQTT詳細(xì)使用的兩種方法,需要的朋友可以參考下
2024-07-07
js wmp操作代碼小結(jié)(音樂(lè)連播功能)
js對(duì)于wmp的一些屬性與方法，方便大家控制音樂(lè)的播放的一些細(xì)節(jié)
2008-11-11