云狐网

您现在的位置是:首页 > 网站建设 > 网络编程

网络编程

JavaScript canvas实现七彩太阳光晕效果(图文)

电脑迷 2021-07-30 22:01:01网络编程
本文实例为大家分享了JavaScript canvas实现七彩太阳光晕效果的具体代码,供大家参考,具体内容如下
  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4.     <meta charset="UTF-8"
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0"
  6.     <title>Document</title> 
  7.     <script> 
  8.         window.onload=function(){ 
  9.             var canvas=document.getElementById('canvas'); 
  10.             var cx=canvas.getContext("2d"); 
  11.             cx.fillStyle='pink'
  12.             cx.strokeStyle='pink'
  13.             for(var i=0;i<10;i++){ 
  14.                 var g=cx.createLinearGradient(0,0,290,290); 
  15.                 g.addColorStop(0,'rgba(255,0,0,1)'); 
  16.                 g.addColorStop(0.1,'rgba(255,0,0,0.5)'); 
  17.                 g.addColorStop(0.2,'rgba(255,165,0,0.4)'); 
  18.                 g.addColorStop(0.4,'rgba(205,255,0,0.5)'); 
  19.                 g.addColorStop(0.6,'rgba(230,145,0,0.5)'); 
  20.                 g.addColorStop(0.8,'rgba(0,127,255,0.5)'); 
  21.                 g.addColorStop(0.9,'rgba(100,200,205,0.9)'); 
  22.                 g.addColorStop(1,'rgba(0,255,255,0.5)');; 
  23.                 cx.fillStyle=g; 
  24.                 cx.beginPath(); 
  25.                 cx.arc(i*25,i*25,i*10,0,Math.PI*2,true); 
  26.                 cx.closePath(); 
  27.                 cx.fill(); 
  28.             } 
  29.         } 
  30.     </script> 
  31. </head> 
  32. <body> 
  33.     <canvas id="canvas" width="600px" height="600px" style="background-color: #ccc;"></canvas> 
  34.      
  35. </body> 
  36. </html> 
七彩太阳光晕效果图如下:

本文地址:https://www.yunhu.net/post/3559.html

文章评论