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

128kj

浏览: 600306 次
来自: ...

最近访客更多访客>>

hcmfys

caizi12

sdtvyyb_007

hanqunfeng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5 动画游戏
javascript

html5 html javascript canvas

点击这里可以看到动画效果：
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

Arcs1.zip (1.2 KB)
下载次数: 2

查看图片附件

0
顶

0
踩

分享到：

HTML5 Canvas动画模板 | HTML5 Canvas “红心一棵”

2014-05-14 10:44
浏览 2781
评论(0)
分类:编程语言
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

HTML5 Canvas 旋转的“金字塔”

HTML5 canvas 飘扬的五星红旗

简单HTML5 Canvas Arrow旋转动画

HTML5 Canvas简单透明文字动画

一个非常好的HTML5 Canvas焰火效果

《HTML5 Canvas学习笔记(10)》数钱数到手抽筋

HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三（游戏面板）

HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二（方块）

HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）

HTML5 Canvas学习笔记(6)拼图游戏（数字版）

HTML5 Canvas学习笔记(5)游戏得分动画

HTML5 Canvas学习笔记(4)游戏界面的淡入淡出

HTML5 Canvas学习笔记(3)加载游戏/动画音乐

HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体

HTML5 Canvas学习笔记(1)处理鼠标事件

javaScript 广度优先搜索法"自动推箱子"（二）

javaScript 广度优先搜索法"自动推箱子"（一）

HTML5 Canvas简单淡入淡出游戏启动界面

HTML5 Canvas贝塞尔曲线动画

javascript for语句最佳实践

最近访客更多访客>>