JavaScript canvas實現(xiàn)七彩太陽光暈效果
更新時間：2021年05月20日 14:35:30 作者：bling flower
這篇文章主要為大家詳細介紹了JavaScript canvas實現(xiàn)七彩太陽光暈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript canvas實現(xiàn)七彩太陽光暈效果的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
var canvas=document.getElementById('canvas');
var cx=canvas.getContext("2d");
cx.fillStyle='pink';
cx.strokeStyle='pink';
for(var i=0;i<10;i++){
var g=cx.createLinearGradient(0,0,290,290);
g.addColorStop(0,'rgba(255,0,0,1)');
g.addColorStop(0.1,'rgba(255,0,0,0.5)');
g.addColorStop(0.2,'rgba(255,165,0,0.4)');
g.addColorStop(0.4,'rgba(205,255,0,0.5)');
g.addColorStop(0.6,'rgba(230,145,0,0.5)');
g.addColorStop(0.8,'rgba(0,127,255,0.5)');
g.addColorStop(0.9,'rgba(100,200,205,0.9)');
g.addColorStop(1,'rgba(0,255,255,0.5)');;
cx.fillStyle=g;
cx.beginPath();
cx.arc(i*25,i*25,i*10,0,Math.PI*2,true);
cx.closePath();
cx.fill();
}
}
</script>
</head>
<body>
<canvas id="canvas" width="600px" height="600px" style="background-color: #ccc;"></canvas>
</body>
</html>
效果圖如下：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
JS使用setInterval實現(xiàn)的簡單計時器功能示例
這篇文章主要介紹了JS使用setInterval實現(xiàn)的簡單計時器功能,涉及javascript基于setInterval的定時觸發(fā)與數(shù)值運算相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
javascript firefox 自動加載iframe 自動調(diào)整高寬示例
iframe 自動獲取onload高寬以及iframe 自動加載，具體實現(xiàn)如下，感興趣的朋友可以參考下2013-08-08
這篇文章主要介紹了es6新特征之?dāng)?shù)字數(shù)組和字符串的相關(guān)資料，需要的朋友可以參考下2016-10-10
這篇文章主要通過js封裝cookie的函數(shù)代碼，想用js實現(xiàn)cookies操作的朋友可以參考下2013-06-06
網(wǎng)頁取色...2006-10-10
JavaScript BASE64算法實現(xiàn)(完美解決中文亂碼)
這篇文章主要介紹了JavaScript BASE64算法實現(xiàn)(完美解決中文亂碼),先用escape()對中文進行編碼.然后再進行base64編碼. 解碼時,再加入()對中文進行解碼,這樣就可以避免中文亂碼問題2017-01-01
這篇文章主要介紹了微信小程序 slot踩坑的解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
javascript數(shù)組元素刪除方法delete和splice解析
這篇文章主要介紹了javascaipt數(shù)組元素刪除方法delete和splice解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
js中各種數(shù)據(jù)類型檢測和判定的實戰(zhàn)示例
typeof一般被用于判斷一個變量的類型,我們可以利用typeof來判斷number,string,object,boolean,function,undefined,symbol這七種類型,下面這篇文章主要給大家介紹了關(guān)于js中各種數(shù)據(jù)類型檢測和判定的相關(guān)資料,需要的朋友可以參考下2022-11-11
egg.js的基本使用和調(diào)用數(shù)據(jù)庫的方法示例
這篇文章主要介紹了egg.js的基本使用和調(diào)用數(shù)據(jù)庫的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05