JavaScript canvas實(shí)現(xiàn)七彩太陽(yáng)光暈效果
更新時(shí)間：2021年05月20日 14:35:30 作者：bling flower
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)七彩太陽(yáng)光暈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript canvas實(shí)現(xiàn)七彩太陽(yáng)光暈效果的具體代碼，供大家參考，具體內(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>
效果圖如下：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)正則去除a標(biāo)簽并保留內(nèi)容的方法【測(cè)試可用】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)正則去除a標(biāo)簽并保留內(nèi)容的方法,結(jié)合實(shí)例形式詳細(xì)分析了javascript針對(duì)a標(biāo)簽及span標(biāo)簽的正則匹配相關(guān)操作技巧,需要的朋友可以參考下2018-07-07![js 中{},[]中括號(hào),大括號(hào)使用詳解](http://img.jbzj.com/images/xgimg/bcimg1.png)
js 中{},[]中括號(hào),大括號(hào)使用詳解
{ } 大括號(hào)，表示定義一個(gè)對(duì)象，大部分情況下要有成對(duì)的屬性和值，或是函數(shù)2011-05-05
這篇文章主要介紹了JavaScript中的變量提升和函數(shù)提升，在js中對(duì)變量進(jìn)行操作后打印值經(jīng)常會(huì)出現(xiàn)undefined的現(xiàn)象。其實(shí)原因是因?yàn)閖s中有一個(gè)叫做變量提升的功能2022-07-07
JavaScript獲取服務(wù)器時(shí)間的方法詳解
這篇文章主要介紹了JavaScript獲取服務(wù)器時(shí)間的方法,結(jié)合實(shí)例形式詳細(xì)分析了javascript基于ajax獲取服務(wù)器時(shí)間的相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
Bootstrap.css與layDate日期選擇樣式起沖突的解決辦法
這篇文章主要為大家詳細(xì)介紹了BootStrap.css與layDate日期選擇樣式起沖突的解決辦法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
jQuery ajax(復(fù)習(xí))—Baidu ajax request分離版
你沒(méi)有看錯(cuò)標(biāo)題，本文的確是在講Baidu ajax，不過(guò)是很久很久以前的版本了,我們先分析一段簡(jiǎn)單的ajax代碼，來(lái)自早期的百度七巧板項(xiàng)目通過(guò)這個(gè)來(lái)先復(fù)習(xí)一遍ajax的知識(shí)2013-01-01
這篇文章主要介紹了js控制網(wǎng)頁(yè)前進(jìn)和后退的方法,涉及javascript中history.go方法的相關(guān)使用技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-06-06
最近一個(gè)新需求，要求用下拉多選框?qū)崿F(xiàn)省份、城市的級(jí)聯(lián)選擇。2010-05-05
JavaScript實(shí)現(xiàn)選中文字提示新浪微博分享效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)選中文字提示新浪微博分享效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Symbol是一種特殊的、不可變的數(shù)據(jù)類型,可以作為對(duì)象屬性的標(biāo)識(shí)符使用,表示獨(dú)一無(wú)二的值,這篇文章主要給大家介紹了關(guān)于JS中Symbol類型的介紹與基本用法的相關(guān)資料,需要的朋友可以參考下2024-04-04