JavaScript canvas实现七彩太阳光晕效果

绝代码农

　　本文实例为大家分享了JavaScript canvas实现七彩太阳光晕效果的具体代码，供大家参考，具体内容如下

<!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"></canvas>
  
</body>
</html>

　　效果图如下：

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

[JavaScript] JavaScript canvas实现七彩太阳光晕效果

相关帖子

javascript怎么实现窗口置顶

JavaScript怎样实现点击出现图片效果

常用JavaScript的注释方法示例

怎么在JavaScript中加注释

uni-app 利用canvas画简单海报并保存图片

利用html+js触发弹窗事件

javascript如何改变背景

使用原生querySelectorAll和forEach来实现点击切换

免插件、DZ内置JS轻松实现外链访问二次确认对话提示框

绝代码农 LV4