canvas 绘圆加边框

HTML5中canvas元素,绘制圆形需要使用路径,开始时要取得图形上下文,首先使用路径来勾勒图形的轮廓,然后设置颜色,进行绘制。

arc(cx,cy,radius,start_angle,end_angle,direction);

  cx 水平坐标
  cy 垂直坐标
  radius 圆心
  start-angel 圆周起始位置 (以圆心为参考点,不是以坐标原点为参考点。下面配图详细解释)
  end_angle   圆周结束位置 Math.PI是半圆 Math.PI*2是整个圆 0.5为四分之一
  direction   顺、逆时针 false为顺时针,true为逆时针(决定了圆弧的方向)


例:(点击查看效果)

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8" />
  <script>

function draw(id) {
    var canvas = document.getElementById(id);
    if (canvas == null) return false;
    var context = canvas.getContext('2d');
    context.fillStyle = "#EEEEFF";
    context.fillRect(0, 0, 400, 300);
    var n = 0;
    for (var i = 0; i < 10; i++) {
      context.beginPath();
      context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
      context.closePath();
      context.fillStyle = 'rgba(255, 0, 0, 0.25)';
      context.fill();
   }
 }
</script>
</head>
 <body onLoad="draw('canvas');">
  <canvas id="canvas" width="400" height="300"/>
 </body>
</html>

 

 

 

  context.beginPath();
   该方法不使用参数,通过调用该方法,开始路径的绘制。在几次循环的创建路径的过程中,每次开始创建是都要调用beginPath函数。

  context.arc(x,y,radius,startAngle,endAngle,anticlockwise)

  该方法使用六个参数,x为绘制圆形的起点横坐标,y为绘制圆形图形的起点坐标,radius为绘制圆形半径,
starAngle为开始角度(以圆心为参考点,绕圆心旋转,不是以坐标原点为参考点),endAngle为结束角度,anticlockwise为是否按顺时针方向进行绘制。

arc方法不仅可以用来绘制圆形,也可以用来绘制圆弧。
  context.closePath();
将路径关闭后,路径的创建工作就完成了,但还没有真正绘制任何图形。
   context.fillStyle = 'rgba(255, 0, 0, 0.25)';
   context.fill();

使用创建好的路径绘制图形。

例:(点击查看效果)


<!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 = ["Arc.OPEN","Arc.CHORD","Arc.PIE"];
   function render(w, h,context) {
      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();
        }
    }
    render(400,400,context);
 

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

 

 

转:http://www.108js.com/article/article7/70206.html?id=1036

posted @ 2016-02-24 18:07  cssfirefly  阅读(11243)  评论(0编辑  收藏  举报
foot