请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 Canvas 查看内容

HTML5 Canvas arc方法绘制圆弧

2013-10-2 11:15| 发布者: admin| 查看: 2232| 评论: 0

摘要: 说明这个示例比之前见到过的要复杂一些,画了12个不同的弧形,有不同夹角和填充状态的。如果我用上面画笑脸的方式来画这些弧形,那会是一大段的代码,而且,画每一个弧形时我都需要知道其圆心位置。像我这里画90,18 ...

说明

这个示例比之前见到过的要复杂一些,画了12个不同的弧形,有不同夹角和填充状态的。如果我用上面画笑脸的方式来画这些弧形,那会是一大段的代码,而且,画每一个弧形时我都需要知道其圆心位置。像我这里画 90180 和 270 度的弧形看起来不是很麻烦,但是如果图形更复杂一些,则实现起来会越来越困难。

 

代码

<html>

  <head>

  <script type="text/javascript">

   function draw() {

      var canvas = document.getElementById("cv"); 

      if (canvas.getContext) { 

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

           for (i=0;i<4;i++){ 

            for(j=0;j<3;j++){    

             //chinese_xu 原始代码     

             ctx.beginPath();     

             var x = 25+j*50; // x coordinate     

             var y = 25+i*50; // y coordinate     

             var radius = 20; // Arc radius     

             var startAngle = 0; // Starting point on circle     

             var endAngle = Math.PI+(Math.PI*j)/2 ;

             var anticlockwise = (i%2==0 ? false : true); 

             ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);      

             if (i>1){       

             ctx.fill();     

             else {       

             ctx.stroke();     

             }   

            } 

           } //chinese_xu 原始代码并没有按照1/4圆递增来画。 

           //修改后输出4行4列,要把画布扩大到200*200观看 

           for (i=0;i<4;i++){    

            for(j=0;j<4;j++){         

            ctx.beginPath();     

            var x = 25+j*50; // x coordinate     

            var y = 25+i*50; // y coordinate     

            var radius = 20; // Arc radius     

            var startAngle = 0; // Starting point on circle     

            var endAngle = Math.PI*(2-j/2);  

            var anticlockwise  = (i%2==0 ? false : true); 

            ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);      

            if (i>1){

              ctx.fill();

            else {       

              ctx.stroke();     

            }   

           

           }

       }  

    }   

    </script>

    <title>测试绘制路径3复杂曲线title>

  </head>

  <body onload="draw();" > 

      <canvas id="cv" width="150" height="150">

      </canvas>

  </body>

html>


效果:


鲜花

握手

雷人

路过

鸡蛋

相关阅读

快讯
发布主题

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2017-9-25 08:35 , Processed in 0.084619 second(s), 28 queries .

返回顶部