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

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

這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(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)文章

JavaScript錯誤處理和堆棧追蹤詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript錯誤處理和堆棧追蹤的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
百度地圖去掉marker覆蓋物或者去掉maker的label文字方法
下面小編就為大家分享一篇百度地圖去掉marker覆蓋物或者去掉maker的label文字方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
window.location.href IE下跳轉(zhuǎn)失效的解決方法
這篇文章主要介紹了window.location.href IE下跳轉(zhuǎn)失效的解決方法,需要的朋友可以參考下
2014-03-03
js限制文本框只能輸入數(shù)字方法小結(jié)
這篇文章主要分享下js代碼限制文本框中只能輸入數(shù)字的多個實(shí)例，學(xué)習(xí)下js控制文本框中輸入數(shù)字的方法,需要的朋友可以參考下
2014-06-06
javascript顯示系統(tǒng)當(dāng)前時間代碼
這篇文章主要為大家詳細(xì)介紹了javascript如何顯示系統(tǒng)當(dāng)前時間代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
JS前端知識點(diǎn)總結(jié)之內(nèi)置對象，日期對象和定時器相關(guān)操作
這篇文章主要介紹了JS前端知識點(diǎn)總結(jié)之內(nèi)置對象，日期對象和定時器相關(guān)操作,簡單總結(jié)分析了JS內(nèi)置對象，日期對象和定時器相關(guān)對象方法及使用技巧,需要的朋友可以參考下
2019-07-07
使用js檢測瀏覽器是否支持html5中的video標(biāo)簽的方法
這篇文章主要介紹了使用js檢測瀏覽器是否支持html5中的video標(biāo)簽的方法,需要的朋友可以參考下
2014-03-03
詳解通用webpack多頁面自動導(dǎo)入方案
本文主要介紹了通用webpack多頁面自動導(dǎo)入方案，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
無刷新上傳文件并返回自定義值
本文給大家簡單分享了一下個人項(xiàng)目中解決無刷新上傳文件的方法和示例，有需要的小伙伴可以參考下。
2015-06-06
詳解JavaScript中的作用域鏈與閉包
這篇文章主要為大家詳細(xì)介紹一下JavaScript中的作用域鏈與閉包的使用，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下
2022-11-11