真真心

导航

旋转的太极图

最近刚学习canvas，自己做了一个太极图。

<!DOCTYPE html>
<html>
 <head>
  <title>绘制圆形练习</title>
  <meta charset="utf-8" />
 </head>

 <body>
  <canvas id="canvas" width="500px" height="300px"></canvas>

  <script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.translate(canvas.width/2,canvas.height/2);
    setInterval(function(){
        context.clearRect(0,0,500,300);
        context.rotate(Math.PI/180*10);
        // 1. 绘制空心圆形
        context.beginPath();
        context.arc(0,0,100,0,Math.PI*2);
        context.closePath();
        context.stroke();

        // 2. 绘制实心半圆
        context.beginPath();
        context.arc(0,0,100,Math.PI/2,Math.PI*3/2);
        context.closePath();
        context.fill();

        // 3. 绘制黑色圆形
        context.beginPath();
        context.arc(0,50,50,0,Math.PI*2);
        context.closePath();
        context.fill();

        // 4. 绘制白色圆形
        context.fillStyle = "white";
        context.beginPath();
        context.arc(0,-50,50,0,Math.PI*2);
        context.closePath();
        context.fill();

        // 5. 绘制一黑一白小圆形
        context.beginPath();
        context.arc(0,50,20,0,Math.PI*2);
        context.closePath();
        context.fill();

        context.fillStyle = "black";
        context.beginPath();
        context.arc(0,-50,20,0,Math.PI*2);
        context.closePath();
        context.fill();
    },100);
    

  </script>
 </body>
</html>

 

posted on 2016-01-08 17:38  真真心  阅读(491)  评论(0)  编辑  收藏  举报