基于canvas实现的绚丽圆圈效果完整实例

网络编程 2024/11/20 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

本文实例讲述了基于canvas实现的绚丽圆圈效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

<!DOCTYPE html>
<html>
 <head>
  <title>demo</title>
  <style type="text/css">
   body {
    margin:0; background:black;
   }
   #canvas {
    border:3px solid gray; box-shadow:0px 0px 2px 2px #D5D5D5; margin-left:100px; margin-top:50px;
   }
   #power {
    position:fixed; bottom:50px; right:50px; 
   }
   #power a {
    color:green; text-decoration:none; display:inline-block; padding:20px; border:2px solid orange; box-shadow:0px 0px 2px 2px blue;
    font-size:30px;
   }
  </style>
 </head>
 <body>
  <canvas id="canvas" width="500px" height="500px"></canvas>
  <script type="text/javascript">
   var canvas = document.getElementById("canvas");
   var ctx = canvas.getContext("2d");
   var colorList = "abcdefABCDEF0123456789".split("");
   var colorListLength = colorList.length;
   var arcList = [];
   function createArc(attr) {
    ctx.beginPath();
    ctx.fillStyle = attr.color || "black";
    ctx.arc(attr.x, attr.y, attr.r, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();
   }
   function color() {
    var color = "#";
    for(var i=0; i<6; i++) {
     color += colorList[Math.round(Math.random()*colorListLength)];
    }
    return color;
   }
   function Arc() {
    this.count = 0;
    this.r = 5;
    this.x = Math.round(Math.random()*500);
    this.add = Math.round(Math.random()*5);
    this.limit = Math.round(Math.random()*100)
    this.mode = Math.round(Math.random());
    var _self = this;
    _self.run = function() {
     if(_self.r >= _self.limit) {
      _self.run = null;
      return;
     }
     _self.x += _self.add*(_self.mode == 1 "_blank" href="https://www.jb51.net/Special/104.htm">jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》
希望本文所述对大家JavaScript程序设计有所帮助。

canvas,绚丽圆圈效果

标签：

canvas,绚丽圆圈效果

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“基于canvas实现的绚丽圆圈效果完整实例”

暂无基于canvas实现的绚丽圆圈效果完整实例的评论...

更新日志

2024年11月20日

基于canvas实现的绚丽圆圈效果完整实例

canvas,绚丽圆圈效果

JavaScript小技巧整理篇(非常全)

基于canvas实现的钟摆效果完整实例

评论“基于canvas实现的绚丽圆圈效果完整实例”

更新日志

友情链接