HTML5 Canvas 圆弧动画（绕四周运动）-优快云博客

本文介绍如何使用 HTML5 的 Canvas API 来绘制并实现动态的圆形动画效果。通过 JavaScript 控制圆的位置、方向及开口状态，展示了三种不同的圆弧类型：开放弧、弦和饼形，并附带完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击这里可以看到动画效果：
[url]http://www.108js.com/article/article7/src/70206/Arcs1.html[/url]

欢迎访问博主的网站：[url]http://www.108js.com[/url]
效果图：
[img]http://dl2.iteye.com/upload/attachment/0097/0986/e57ad2d1-dda0-36bf-a528-bcb20afd0d49.gif[/img]

代码：
<!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);