JavaScript canvas實現(xiàn)帶有陰影的圖形和文字
更新時間：2021年03月16日 17:23:31 作者：believehxl
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實現(xiàn)帶有陰影的圖形和文字，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
用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");//繪制一個新畫布
var ctx = myc.getContext("2d"); //設(shè)置繪圖環(huán)境為2d
var myg = ctx.createRadialGradient(130,200,0,130,200,90);
//addColorStop方法 第一個參數(shù)為圖像內(nèi)的百分比 第二個參數(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); //繪制一個新圓
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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
多個表單中如何獲得這個文件上傳的網(wǎng)址實現(xiàn)js代碼
假設(shè)一個網(wǎng)頁里有多個表單，其中一個表單里有文件上傳，問題是如何獲得這個文件上傳的網(wǎng)址呢，接下來為大家介紹下實現(xiàn)的js代碼，感興趣的朋友可以參考下哈，希望可以幫助到你2013-03-03
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實現(xiàn)流星特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
JavaScript中btoa和atob全局函數(shù)示例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中btoa和atob全局函數(shù)的相關(guān)資料,atob和btoa是window對象的兩個函數(shù),用來編碼解碼Base64,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
按鈕組和下拉菜單組件一樣，需要依賴于button.js插件才能正常運作。通過本文給大家詳細(xì)介紹Bootstrap按鈕組件，感興趣的朋友一起學(xué)習(xí)吧2016-04-04
最近公司需求做一個微信紅包雨功能,這里給大家總結(jié)下實現(xiàn)的方法,這篇文章主要給大家介紹了關(guān)于uni-app微信小程序之紅包雨活動的相關(guān)資料,需要的朋友可以參考下2024-01-01
下面小編就為大家?guī)硪黄愃朴赒Q的右滑刪除效果的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
做一個彈出dialog時用到了取父頁面的寬度和高度的方法,需要的朋友可以參考下2014-02-02
基于代數(shù)方程庫Algebra.js解二元一次方程功能示例
這篇文章主要介紹了基于代數(shù)方程庫Algebra.js解二元一次方程功能,結(jié)合具體實例形式分析了方程庫Algebra.js計算方程的具體使用技巧,需要的朋友可以參考下2017-06-06
MQTT(消息隊列遙測傳輸協(xié)議),是一種基于發(fā)布/訂閱(publish/subscribe)模式的通訊協(xié)議,該協(xié)議構(gòu)建于TCP/IP協(xié)議上,這篇文章主要給大家介紹了關(guān)于前端MQTT詳細(xì)使用的兩種方法,需要的朋友可以參考下2024-07-07
js對于wmp的一些屬性與方法，方便大家控制音樂的播放的一些細(xì)節(jié)2008-11-11