js canvas實現(xiàn)簡單的圖像擴散效果

更新時間：2020年06月28日 09:59:04 作者：wangbo54979

這篇文章主要為大家詳細介紹了js canvas實現(xiàn)簡單的圖像擴散效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了canvas實現(xiàn)簡單圖像擴散的代碼，供大家參考，具體內容如下

<!DOCTYPE HTML> 
<html> 
<body> 
 
<canvas id="myCanvas" width="800" height="800" style="border:1px solid #c3c3c3;"> 
Your browser does not support the canvas element. 
</canvas> 
 
<script type="text/javascript"> 
 
var c=document.getElementById("myCanvas"); 
var cxt=c.getContext("2d"); 
var x1=200,x2=400,x3=600,y1=400,y2=400,y3=400,lr1=10,lr2=10,lr3=10; 
var lc1="#EE7942";lc2="#EE2C2C";lc3="#CD6839"; 
var lr1,lr2,lr3; 
 
 
drawarc(15,"#CAE1FF",1); 
drawarc(25,"#98FB98",2); 
drawarc(25,"#757575",3); 
 
drawarc(30,"#000000",1); 
drawarc(35,"#32CD32",2); 
drawarc(50,"#6959CD",3); 
 
 
drawarc(45,"red",1); 
drawarc(50,"#fff",2); 
drawarc(65,"#000",3); 
 
 
function drawarc(radiu,ecolor,type){ 
 var grd; 
 var x,y,r; 
 var scolor; 
  switch(type){ 
  case 1: 
   x=x1; 
   y=y1; 
   r=lr1; 
   lr1=radiu; 
   scolor=lc1; 
  break; 
  case 2: 
   x=x2; 
   y=y2; 
   r=lr2; 
   lr2=radiu; 
   scolor=lc2; 
  break; 
  case 3: 
   x=x3; 
   y=y3; 
   r=lr3; 
   lr3=radiu; 
   scolor=lc3; 
   break; 
  default: 
  } 
 grd=cxt.createRadialGradient(x,y,r,x,y,radiu); 
 grd.addColorStop(0,scolor); 
 grd.addColorStop(1,ecolor); 
 cxt.fillStyle=grd; 
 cxt.beginPath(); 
 cxt.arc(x,y,radiu,0,360,false); 
 cxt.closePath(); 
 cxt.fill(); 
} 
</script> 
 
</body> 
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Javascript數(shù)組常用方法你都知道嗎
這篇文章主要為大家詳細介紹了Javascript數(shù)組常用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
2022-02-02
理解Javascript_07_理解instanceof實現(xiàn)原理
在《Javascript類型檢測》一文中講到了用instanceof來用做檢測類型，讓我們來回顧一下
2010-10-10
Three.js加載外部模型的教程詳解
這篇文章主要介紹了Three.js外部模型加載的教程詳解,在文章給大家補充介紹了three.js 外部模型加載json的方法，非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-11-11
javascript生成隨機顏色示例代碼
這篇文章主要介紹了使用javascript如何生成隨機顏色,需要的朋友可以參考下
2014-05-05
純JavaScript 實現(xiàn)flappy bird小游戲實例代碼
這篇文章主要介紹了純JavaScript 實現(xiàn)flappy bird小游戲實例代碼,b本文分七大步驟給大家介紹,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-09-09
AngularJS實現(xiàn)textarea記錄只能輸入規(guī)定數(shù)量的字符并顯示
AngularJS 是一個 MV* 框架，最適于開發(fā)客戶端的單頁面應用。它不是個功能庫，而是用來開發(fā)動態(tài)網(wǎng)頁的框架。接下來通過本文給大家介紹AngularJS實現(xiàn)textarea記錄只能輸入規(guī)定數(shù)量的字符并顯示的相關內容，需要的朋友參考下吧
2016-04-04
Javascript學習之談談JS的全局變量跟局部變量(推薦)
這篇文章主要介紹了Javascript學習之談談JS的全局變量跟局部變量雖然腳本之家小編以前發(fā)過，但還是這篇文章整理的比較好，需要的朋友可以參考一下
2016-08-08
基于JavaScript實現(xiàn)飄落星星特效
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)飄落星星特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
JS寫的數(shù)字拼圖小游戲代碼[學習參考]
昨天沒事做，就用JS寫了個數(shù)字拼圖的小游戲，自娛自樂。可惜關于逆序數(shù)的問題還沒解決，現(xiàn)在有時是拼不成的，大家見諒了。
2008-10-10
JS中如何實現(xiàn)復選框全選功能
本文通過實例代碼給大家介紹了js中實現(xiàn)復選框全選功能，代碼簡單易懂，非常不錯，需要的朋友參考下
2016-12-12