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í)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JSP實(shí)現(xiàn)彈出登陸框以及陰影效果
- WebGL three.js學(xué)習(xí)筆記之陰影與實(shí)現(xiàn)物體的動畫效果
- 利用Three.js如何實(shí)現(xiàn)陰影效果實(shí)例代碼
- js當(dāng)前頁面登錄注冊框,固定div,底層陰影的實(shí)例代碼
- JS當(dāng)前頁面登錄注冊框,固定DIV,底層陰影的實(shí)例代碼
- js 實(shí)現(xiàn)無干擾陰影效果 簡單好用（附文件下載）
- Div+Js實(shí)現(xiàn)的帶陰影菜單 微軟以前網(wǎng)站曾用過
- 用JS實(shí)現(xiàn)網(wǎng)頁元素陰影效果的研究總結(jié)
相關(guān)文章
這篇文章主要為大家詳細(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ù)字的多個實(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)入方案，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
本文給大家簡單分享了一下個人項(xiàng)目中解決無刷新上傳文件的方法和示例，有需要的小伙伴可以參考下。2015-06-06
這篇文章主要為大家詳細(xì)介紹一下JavaScript中的作用域鏈與閉包的使用，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下2022-11-11