利用canvas简单制作一个转动的圆

作者: 神永夜 | 来源:发表于2016-07-21 10:48 被阅读0次

利用canvas简单制作一个转动的圆
android自定义进度条，类似微信视频加载
HTML5 Canvas 完整测试 - 弧形
基于canvas画板原理（H5）
canvas简单动画--躁动的小球
canvas基础之 konva框架简单应用炫酷的中心圆转动
canvas教程之《贪吃蛇》
微信小程序制作简易画板
利用nodejs+ffmpeg制作视频转动图小程序
【有利可图网】PS教程：利用PS设计制作出震撼的视觉效果

<!DOCTYPE html>

<html>

<head>

  <title>round.html</title>

  <style type="text/css">

    #canvas {

      background:#dddddd;

    }

  </style>

  <script type="text/javascript">

    var canvas=null;

    var ctx=null;

    //参数

    var r=10;//小圆半径

    var number=6;//圆形层数

    var number2=9;//最里层的小圆的数量

    var direction=0;//旋转方向

    var startAngle=0;

    function init() {

      canvas=document.getElementById("canvas");

      ctx=canvas.getContext("2d");

      //起始角度

      setInterval(function(){

      changeAngle();

      },500);

    }

    function changeAngle(){

      ctx.clearRect(0,0,400,400);

      startAngle==360?startAngle=0:startAngle++;

      draw(startAngle);

    }

    function draw(Angle) {

      for(var i=1;i<=number;i++) {

        var RGB = Math.floor(Math.random()*255);

        //遍历圆个数

        for(var j=1;j<=number2*i;j++) {

          var dx = canvas.width/2;//大圆圆心x坐标

          var dy = canvas.height/2;//大圆圆心y坐标

          //j*dig 所有圆跨的角度

          var dig = (Angle*2*Math.PI/360)+j*2*Math.PI/(number2*i);

          var R=(2*r+1)/2/(Math.sin(2*Math.PI/number2/2/i))

          var x=dx+Math.sin(Angle+dig)*R;

          var y=dy+Math.cos(Angle+dig)*R;

          ctx.beginPath();

          ctx.fillStyle ="rgb("+RGB+","+Math.floor(RGB/2)+","+(255-RGB)+")";

          ctx.arc(x,y,r,0,2*Math.PI,true);

          ctx.closePath();

          ctx.fill();

        }

      } 

    }

  </script>

</head>

<body align="center" onload="init()">

  <canvas id="canvas" width="400" height="400"></canvas>

</body>

</html>