`
128kj
  • 浏览: 583808 次
  • 来自: ...
社区版块
存档分类
最新评论

HTML5 Canvas 圆弧动画（绕四周运动）

html5htmljavascriptcanvas 
阅读更多
点击这里可以看到动画效果：
http://www.108js.com/article/article7/src/70206/Arcs1.html

欢迎访问博主的网站：http://www.108js.com
效果图：


代码：
<!DOCTYPE html>
<html><head><meta charset="gbk">
<title>HTML5 Canvas画圆</title>
</head>
<body>
  <canvas id="canvas" width="400" height="400" style="border:2px solid blue;"></canvas>
<script> 
var canvas = document.getElementById("canvas");  
   var context = canvas.getContext('2d');  
    var types = ["Arc2D.OPEN","Arc2D.CHORD","Arc2D.PIE"];
    var  CLOSE    = 0;
    var  OPEN     = 1;

    var  FORWARD  = 0;
    var  BACKWARD = 1;
    var  DOWN     = 2;
    var  UP       = 3;

    var aw=20;
    var  ah=20; // animated arc width & height
    var x=30;
    var y=30;
    var angleStart = 45;
    var angleExtent = 270;
    var mouth = CLOSE;
    var direction = FORWARD;



    function step(w, h) {
      // Compute direction
        if (x+aw >= w-5 && direction == FORWARD ) direction = DOWN;
        if (y+ah >= h-5 && direction == DOWN    ) direction = BACKWARD;
        if (x-aw <=   5 && direction == BACKWARD) direction = UP;
        if (y-ah <=   5 && direction == UP      ) direction = FORWARD;

      // compute angle start & extent
        if (mouth == CLOSE) {
            angleStart -= 5;
            angleExtent += 10;
        }
        if (mouth == OPEN) {
            angleStart += 5;
            angleExtent -= 10;
        }
        if (direction == FORWARD) {
            x += 5; y = 30;
        }
        if (direction == DOWN) {
            x = w-30; y += 5;
        }
        if (direction == BACKWARD) {
            x -= 5; y = h-30;
        }
        if (direction == UP) {
            x = 30; y -= 5;
        }
        if (angleStart == 0)
            mouth = OPEN;
        if (angleStart > 45)
            mouth = CLOSE;
    }

 var canvas = document.getElementById("canvas");  
   var context = canvas.getContext('2d');  
    var types = ["Arc.OPEN","Arc.CHORD","Arc.PIE"];
   

     function render(w, h,context) {

      // Draw Arcs
       context.lineWidth=5;
       for (var i = 0; i < types.length; i++) {

           context.lineWidth=5;
           context.strokeStyle="blue";
           context.beginPath();
           context.arc((i+1)*w/4,(i+1)*h/4, w/10, Math.PI/4,3*Math.PI/2,false)
          
           if(i==1) context.closePath();
            
           if(i==2) {
              context.lineTo((i+1)*w/4,(i+1)*h/4)
              context.closePath();
            
           }
          context.stroke();
          context.fillStyle="gray";
          context.fill();
        }
        context.save();
        context.translate(x,y);
         switch (direction) {
            case DOWN     : context.rotate(Math.PI/2); break;
            case BACKWARD : context.rotate(Math.PI); break;
            case UP       : context.rotate(3*Math.PI/2);
        }

        context.beginPath();
        //alert(y+"--"+angleStart);

        context.arc(0,0,20,angleStart*Math.PI/180,angleExtent*Math.PI/180,false);
        context.lineTo(0,0)
        context.closePath();
        context.fillStyle="blue";
        context.fill();
        context.restore();


    }
      var loop = setInterval(function () { 
       context.clearRect(0, 0, canvas.width, canvas.height); 
       render(400, 400, context);
       step(400,400);
    }, 50); 

   // render(400,400,context);

</script><body></html>

热情奉献：HTML5 Canvas绘图与动画学习59例源码：
http://www.108js.com/example.html
  • 大小: 5.3 KB
0
顶
0
踩
分享到：
| HTML5 Canvas “红心一棵”
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics