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

canvas 绘圆加边框的更多相关文章

  1. 74、shape 画圆 加 边框

    <?xml version="1.0" encoding="utf-8"?> <!--<shape xmlns:android=&quo ...

  2. canvas 绘点图

    canvas 绘点图 项目中需要一个记录点实时变动的信息,在此记录一下: <!DOCTYPE html> <html lang="en"> <head ...

  3. html5 canvas从圆开始

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Html-浅谈如何正确给table加边框

    一般来说,给表格加边框都会出现不同的问题,以下是给表格加边框后展现比较好的方式 <style> table,table tr th, table tr td { border:1px so ...

  5. 多行图片hover加边框兼容IE7+

    问题: 遇到多行多列排列的图片时,hover上去加边框会把下面的图片挤到别处 ============================================================ ...

  6. div加边框

    一.虚线与实线边框 边框虚线样式:dashed 边框实现样式:solid border:1px dashed #000 代表设置对象边框宽度为1px黑色虚线边框 border:1px solid #0 ...

  7. CSS鼠标悬停图片加边框效果,不位移的方法

    <!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...

  8. AS3给显示对象加边框

    给显示对象加边框,可以有以下三种方法1.根据相交路径的缠绕规则的奇偶规则法(使用奇偶缠绕规则时,任何相交路径都交替使用开放填充与闭合填充.如果使用同一填充绘制的两个正方形相交,则不会填充相交的区域.通 ...

  9. QT自绘标题和边框

    在QT中如果想要自绘标题和边框,一般步骤是: 1) 在创建窗口前设置Qt::FramelessWindowHint标志,设置该标志后会创建一个无标题.无边框的窗口. 2)在客户区域的顶部创建一个自绘标 ...

随机推荐

  1. Lua 架构 The Lua Architecture

    转载自:http://magicpanda.net/2010/10/lua%E6%9E%B6%E6%9E%84%E6%96%87%E6%A1%A3/ Lua架构文档(翻译) 十 102010 前段时间 ...

  2. Adobe AIR socket complicating 导致 socket RST

    基于socket实现HTTP协议 并发请求AB,A为HTTP请求,B为socket请求. A的请求服务器返回数据很短,包体长度只有35,且客户端收到包头后就断开连接,同时A连接的服务器也断开了连接, ...

  3. [C# 基础知识系列]C#中易混淆的知识点

    一.引言 今天在论坛中看到一位朋友提出这样的一个问题,问题大致(问题的链接为:http://social.msdn.microsoft.com/Forums/zh-CN/52e6c11f-ad28-4 ...

  4. oracle 事务测试

    此文章是根据官方改变 模拟帐户转账流程 1.JOHN帐户扣除-DAVID帐户增加-记录日志-事务提交 三个操作必须全部完成此事务才完成,否则失败 创建帐户余额表自增字段自增序列:    ; 创建支票表 ...

  5. FZU Problem 2136 取糖果

     Problem 2136 取糖果 Time Limit: 1000 mSec    Memory Limit : 32768 KB  Problem Description 有N个袋子放成一排,每个 ...

  6. 重设mysql的root密码，MAC OSX

    前些天装得mysql突然链接不上了,原谅我小白,没有在安装后改密码,mysql初始登陆不需要密码,但是之后root是有个临时密码的,然后..然后就登不上了. 网上有很多改密码的帖子,关键的UPDATE ...

  7. C/C++笔试经典程序（二）

    1.下面5个函数哪个能够成功进行两个数的交换? swap1传的是值的副本,在函数体内被修改了形参p.q(实际参数a.b的一个拷贝),p.q的值确实交换了,但是它们是局部变量,不会影响到主函数中的a和b ...

  8. Flash图表控件FusionCharts如何在图表标绘非连续数据

    你可能经常要以不完整的数据点绘制图表.例如,当绘制每月的销售图表时,你可能没有所有的月数据.所以,你可能只想以一个空白的区域来显示缺失的数据,不在这个区域中绘制任何东西.FusionCharts可以让 ...

  9. Django基础篇之数据库选择及相关操作

    在djanjo框架中我们最常用的框架分别就是mysql和sqlit了,下面我们将分别讲述一下这俩种数据库的基础必备知识 mysql 一.利用命令创建(在终端上执行) 1.首先创建一个project项目 ...

  10. 【练习】ORACLE统计信息--直方图

    ①创建表tSQL> create table t as select * from dba_objects; Table created. --收集直方图 SQL> exec dbms_s ...