canvas画图

悠悠 2022-05-14 07:09 367阅读 0赞

### <1>canvas画半圆 ###

html:

js:

var bg = document.getElementById('xxb');
    var ctx = bg.getContext('2d');
    ctx.beginPath();
    //在(100,100)处逆时针画一个半径为50，角度从0到180°的弧线
    //ctx.arc(100,100,50,0*Math.PI,1*Math.PI,true);
    ctx.lineWidth=10;
    ctx.strokeStyle='#f00';
    var grd = ctx.createLinearGradient(0,0,100,0);//从左到右
    grd.addColorStop(0,"#ff0"); //起始颜色
    grd.addColorStop(1,"#00ff00"); //终点颜色
    //ctx.strokeStyle=grd;
    //ctx.stroke();
    //ctx.fillStyle='#00ff00';
    ctx.fillStyle=grd;
    //在(100,100)出逆时针画一个半径为50的实心圆
    //ctx.arc(100,100,50,0*Math.PI,2*Math.PI,true);
    //ctx.fill();
    //在(100,100)出顺时针画一个半径为50的3/4圆弧
    ctx.arc(100,100,50,0.75*Math.PI,2.25*Math.PI,false);
    ctx.stroke();
    
    ctx.beginPath();
    //在(100,100)处逆时针画一个半径为50，角度从0到180°的弧线
    //ctx.arc(100,100,50,0*Math.PI,1*Math.PI,true);
    ctx.lineWidth=10;
    ctx.strokeStyle='#000';
    var grd = ctx.createLinearGradient(0,0,100,0);//从左到右
    grd.addColorStop(0,"#ff0"); //起始颜色
    grd.addColorStop(1,"#00ff00"); //终点颜色
    //ctx.strokeStyle=grd;
    //ctx.stroke();
    //ctx.fillStyle='#00ff00';
    ctx.fillStyle=grd;
    //在(100,100)出逆时针画一个半径为50的实心圆
    //ctx.arc(100,100,50,0*Math.PI,2*Math.PI,true);
    //ctx.fill();
    //在(100,100)出顺时针画一个半径为50的3/4圆弧
    ctx.arc(100,100,50,0.75*Math.PI,2*Math.PI,false);
    ctx.stroke();

结果：

![Image 1][]

四分之三圆

### <2>canvas画弧画圆 ###

圆和圆弧是图形中基本图形之一，今天我们来了解在Canvas中怎么绘制圆和圆弧。在Canvas中绘制圆和圆弧其实和绘制[线段][Link 1]和[矩形][Link 2]一样的简单。在Canvas中，`CanvasRenderingContext2D`对象提供了两个方法（`arc()`和`arcTo()`）来绘制圆和圆弧。

## 与圆和圆弧相关的基础知识 ##

在学习如何绘制圆和圆弧之前，有一些相关的基础知识有必要先进行了解。

*  角度旋转
 *  角度和弧度
 *  正切

### 角度旋转 ###

在[坐标系][Link 3]中，旋转分为顺时针和逆时针两个方向旋转：

![canvas-8-1.png][]

### 角度和弧度 ###

在CSS中，做旋转常用到的都是角度（`deg`）。但在Canvas中绘制圆或圆弧时用到的是弧度（`rad`）。[维基百科][Link 4]中是这样描述弧度的：

> 弧度又称弪度，是平面角的单位，也是国际单位制导出单位。单位弧度定义为圆弧长度等于半径时的圆心角。角度以弧度给出时，通常不写弧度单位，或有时记为`rad`。

![Radian_cropped_color.svg][]

一个完整的圆的弧度是`2π`，所以`2π rad = 360°`，`1 π rad = 180°`，`1°=π/180 rad`，`1 rad = 180°/π`（约`57.29577951°`）。以度数表示的角度，把数字乘以`π/180`便转换成弧度；以弧度表示的角度，乘以`180/π`便转换成度数。

rad = (π / 180) * deg

同样的：

deg = (rad * 180) / π

平时我们常看到的各种弧度如下：

![Radian-common.svg][]

JavaScript中弧度角度换算

仅难了解角度和弧度之间的关系是不够的，我们还需要知道怎么使用JavaScript来实现角度和弧度之间的换算。一个`π`大约是`3.141592653589793`，在JavaScript中对应的是`Math.PI`。那么角度和弧度之间的换算：

rad = (Math.PI * deg) / 180

同样的：

deg = (rad * 180) / Math.PI

为了方便计算和使用，可以将其封装成JavaScript函数：

function getRads (degrees) {
        return (Math.PI * degrees) / 180;
    }
    
    function getDegrees (rads) {
        return (rads * 180) / Math.PI;
    }

比如我们要将`30deg`转换成`rad`，可以直接使用：

getRads(30); // 0.5235987755982988rad
    getDegrees(0.7853981633974483); // 45deg

下图展示了常见的角度和弧度之间的换算：

![Unit_circle_angles.svg][]

### 正切 ###

[正切][Link 5]（Tangent，tan，也作tg）是[三角函数][Link 6]的一种。它是周期函数，其最小正周期为`π`（`Math.PI`）。正切函数是[奇函数][Link 7]。

> 在Canvas中常常需要和[三角函数][Link 6]打交道，这也说明了数学是多么的重要，真后悔当初没有认真学。有关于Canvas中三角函数的运用，后面我们将会花很大的篇幅来介绍。

为什么在画圆要提到正切呢？那是因为我们后面在介绍`artTo()`时会涉及到正切相关的知识。下图可以说明，正切和圆以及圆弧之间的关系，看上去一点复杂，但不用急于求成，后面会慢慢懂的：

![Circle-trig6.svg][]

有了这些基础，我们就可以开始学习在Canvas中怎么画圆和圆弧了。这也是这篇文章真正的主题，如果你等不及了，那继续往后阅读。

## arc()方法 ##

先来看`arc()`方法怎么绘制圆和圆弧。Canvas中的`arc()`方法接受六个参数：

arc(x, y, radius, startRad, endRad, [anticlockwise]);

在Canvas画布上绘制以坐标点`(x,y)`为圆心、半么为`radius`的圆上的一段弧线。这段弧线的起始弧度是`startRad`，结束弧度是`endRad`。这里的弧度是以`x`轴正方向为基准、进行顺时针旋转的角度来计算。其中`anticlockwise`表示`arc()`绘制圆或圆弧是以顺时针还是逆时针方向开始绘制。如果其值为`true`表示逆时针，如果是`false`表示为顺时针。该参数是一个可选参数，如果没有显式设置，其值是`false`（也是`anticlockwise`的默认值）。

![canvas-8-2.jpg][]

记得当初我们学数时，圆的周长与半径的关系是：`C = πd`或`C = 2πr`。具备这些基础，我们就可以使用`arc()`绘制弧线或圆了。

### 绘制弧线 ###

先来看`arc()`绘制弧线，根据上面介绍的内容，传对应参数给他：

function drawScreen () {
        // x,y => 圆心坐标点
        // r => 圆弧半径
        var arc = {
            x: myCanvas.width / 2, 
            y: myCanvas.height / 2,
            r: 100
        },
            w = myCanvas.width,
            h = myCanvas.height;
    
        ctx.save();
        ctx.lineWidth = 10;
        ctx.strokeStyle = '#e3f';
    
        // startRad => getRads(-45)
        // endRad => getRads(45)
        // 顺时针旋转
        ctx.beginPath();
        ctx.arc(arc.x, arc.y, arc.r,getRads(-45),getRads(45));
        ctx.stroke();
    
    
        // startRad => getRads(-135)
        // endRad => getRads(135)
        // 逆时针旋转
        ctx.beginPath();
        ctx.strokeStyle = "#f36";
        ctx.arc(arc.x, arc.y, arc.r,getRads(-135),getRads(135),true);
        ctx.stroke();
        ctx.restore();
    
    }

[![canvas-8-3.png][]][canvas-8-3.png 1]

当我们把上面的`stroke()`换`fill()`，上面的效果就不是一个弧线了：

[![canvas-8-4.png][]][canvas-8-4.png 1]

另外在`stroke()`之前调用`closePath()`，那么弧线的起始点和终止点将会以一条直接连接在一起。比如上面的示例，加上之后的效果：

ctx.beginPath();
    ctx.arc(arc.x, arc.y, arc.r,getRads(-45),getRads(45));
    ctx.closePath();
    ctx.stroke();

[![canvas-8-5.png][]][canvas-8-5.png 1]

`arc()`绘制弧线是不是很简单，在实际中，借助一些条件循环，我们可以做一些有意思的效果。比如下面的这个示例，使用`arc()`绘制一个声波波率放大图：

[![canvas-8-6.png][]][canvas-8-6.png 1]

**特别注意：**

*  使用`arc()`绘制图形时，如果没有设置`moveTo()`那么会从圆弧的开始的点（`startRad`处）作为起始点。如果设置了`moveTo()`，那么该点会连线到圆弧起始点。
 *  如果使用`stroke()`方法，那么会从开始连线到圆弧的起始位置。 如果是 fill 方法, 会自动闭合路径填充

![canvas-8-7.png][]

### 绘制制圆 ###

使用`arc`绘制圆和绘制圆弧是一样的，只不过绘制圆的时候`startRad`和`endRad`是相同的。比如：

function drawScreen () {
    
        var arc = {
            x: myCanvas.width / 2,
            y: myCanvas.height / 2,
            r: 50
        },
            w = myCanvas.width,
            h = myCanvas.height;
    
        ctx.save();
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#fff';
        ctx.fillStyle = '#000';
        // 绘制一个边框圆
        ctx.beginPath();
        ctx.arc(arc.x / 2, arc.y, arc.r, getRads(0), getRads(360), false);
        ctx.stroke();
    
        // 绘制一个闭合边框圆
        ctx.beginPath();
        ctx.arc(arc.x, arc.y, arc.r, getRads(0), getRads(360), false);
        ctx.closePath();
        ctx.stroke();
        // 绘制一个填充圆
        ctx.beginPath();
        ctx.arc(arc.x * 1.5, arc.y, arc.r,getRads(0), getRads(360), true);
        ctx.fill();
        //绘制一个带边框填充的圆
        ctx.beginPath();
        ctx.arc(arc.x, arc.y, arc.r / 2,getRads(0), getRads(360), false);
        ctx.stroke();
        ctx.fill();
        ctx.restore();
    
    }

[![canvas-8-8.png][]][canvas-8-8.png 1]

来做个小练习，使用`arc()`绘制一个太极图：

*  绘制一个白色和黑色大半圆，拼成一个圆形
 *  绘制制一个小的白色半圆和另一个黑色小半圆
 *  绘制一个白色和黑色小圆点

这几个组合起来，就是我们想要的太极图：

function drawScreen () {
    
        var arc = {
            x: myCanvas.width / 2,
            y: myCanvas.height / 2,
            r: 100
        },
            w = myCanvas.width,
            h = myCanvas.height;
    
        ctx.save();
        ctx.lineWidth = 1;
    
        // 绘制白色大圆
        ctx.beginPath();
        ctx.fillStyle = '#fff';
        ctx.arc(arc.x, arc.y, arc.r, getRads(-90), getRads(90), false);
        ctx.fill();
    
        // 绘制黑色大圆
        ctx.beginPath();
        ctx.fillStyle = '#000';
        ctx.arc(arc.x, arc.y, arc.r, getRads(-90), getRads(90), true);
        ctx.fill();
    
        // 绘制白色小圆
        ctx.beginPath();
        ctx.fillStyle = '#fff';
        ctx.arc(arc.x, arc.y - arc.r/2, arc.r / 2,getRads(-90), getRads(90), true);
        ctx.fill();
    
        // 绘制黑色小圆
        ctx.beginPath();
        ctx.fillStyle = '#000';
        ctx.arc(arc.x, arc.y + arc.r/2, arc.r / 2,getRads(-90), getRads(90), false);
        ctx.fill();
    
        // 绘制小黑点
        ctx.beginPath();
        ctx.fillStyle = '#000';
        ctx.arc(arc.x, arc.y - arc.r/2, arc.r / 10,getRads(0), getRads(360), false);
        ctx.fill();
    
        // 绘制小白点
        ctx.beginPath();
        ctx.fillStyle = '#fff';
        ctx.arc(arc.x, arc.y + arc.r/2, arc.r / 10,getRads(0), getRads(360), false);
        ctx.fill();
      }

[![canvas-8-9.png][]][canvas-8-9.png 1]

### 绘制扇形 ###

使用`arc()`除了可以绘制弧线和圆之外，还可以绘制扇形。绘制扇形关键点是通过`moveTo()`把起始点位置设置为圆心处，然后通过`closePath()`闭合路径。

function drawScreen () {
    
        var arc = {
            x: myCanvas.width / 2,
            y: myCanvas.height / 2,
            r: 100
        },
            w = myCanvas.width,
            h = myCanvas.height;
    
        ctx.save();
        ctx.lineWidth = 1;
        ctx.strokeStyle = '#e3f';
        ctx.fillStyle = '#e3f';
    
        ctx.beginPath();
        // 起始点设置在圆心处
        ctx.moveTo(arc.x, arc.y);
        ctx.arc(arc.x, arc.y, arc.r,getRads(-45),getRads(45));
        // 闭合路径
        ctx.closePath();
        ctx.stroke();
    
        ctx.beginPath();
        // 起始点设置在圆心处
        ctx.moveTo(arc.x, arc.y);
        ctx.arc(arc.x, arc.y, arc.r,getRads(-135),getRads(135),true);
        // 闭合路径
        ctx.closePath();
        ctx.fill();
    
        ctx.restore();
    }

[![canvas-8-10.png][]][canvas-8-10.png 1]

利用这个原理，可以很轻松的实现一个饼图效果。

> 特别声明：`arc()`方法中的起始弧度参数`startRad`和结束弧度参数`endRad`都是以弧度为单位，即使你填入一个数字，例如`360`，仍然会被看作是`360`弧度。

## arcTo()方法 ##

前面学习了`arc()`方法如何绘制弧线、圆或扇形等。在Canvas中`CanvasRenderingContext2D`还提供了另一个方法`arcTo()`用来绘制弧线，但`arcTo()`绘制不出圆。为什么呢？接下来，咱们就来了解`arcTo()`的使用方法。

`arcTo()`接受五个参数：

arcTo(x1, y1, x2, y2, radius)

`arcTo()`方法将利用当前端点、端点一`(x1, y1)`和端点二`(x2, y2)`这三点所形成的夹角，然后绘制一段与夹角的两边相切并且半径为`radius`的圆上的弧线。弧线的起点就是当前端点所在边与圆的切点，弧线的终点就是商端点二`(x2,y2)`所在边与圆的切点，并且绘制的弧线是两个切点之间长度最短的那个圆弧。此外，如果当前端点不是弧线起点，`arcTo()`方法还将添加一条当前端点到弧线起点的直线线段。

上面理解起来有点吃力。事实上，`arcTo()`尽管是通过两点和半径绘制弧线或圆，但事实上是有三个点参与。也就是说，不管是否调用`arcTo()`，其实就有一个点已经存在`(x0,y0)`。这样就`(x0,y0)`和`(x1,y1)`构成一线，然后`(x1,y1)`和`(x2,y2)`构成一线，这两条线交叉点就是`(x1,y1)`。然后以`radius`绘制的圆弧或圆都会与这两条线相切。这也就是在文章开头提正切的基础。

![canvas-8-11.png][]

或者换下图，你能更好的理解。

![canvas-8-12.png][]

在 `arcTo()` 函数中，虽然参数只涉及到 `P1`也就是参数中的`(x1,y1)` 和 `P2`也就是参数中的`(x2,y2)` 两个点，实际上还有一个隐含的点，就是画布上的当前点（`P0`）也就是前面所说的`(x0,y0)`。当 `P0`, `P1`, `P2` 不重叠也不在一条直线的时候，这 `3` 个点可以构成一个三角形。想象一下，从 `P0` 开始，向 `P1` 画一条线段，从 `P1` 开始到 `P2` 再画一条线段，这两条线段形成一个夹角，然后以 `r` 画一个圆，移动这个圆将这个圆与线段 `P0P1` 和线段 `P1P2` 相切（也可能切点是在 `P0P1` 或者 `P1P2` 的延长线上），然后保留朝向 `P1` 这个点的弧线，就是 `arcTo()` 在弧线这部分做的事情。

实际绘制是这样的：

*  `moveTo()` 给出 `P0` 点坐标
 *  `arcTo()` 函数中的参数给出了 `P1` 点和 `P2` 点的坐标，以及圆形的半径 `r`
 *  计算以 `r` 为半径的圆和直线 `P0P1` 以及 `P1P2` 的切点，记为 `S` 点和 `E` 点，对应图上 `Start` 和 `End` 两个点
 *  从 `P0` 向 `S` 点画出一条线段
 *  从 `S` 点到 `E` 点，画出一段圆弧，半径为 `r`
 *  此时，画布当前点为 `E` 点
 *  然后从 `E` 点又画了一条线段到 `P2` 点，至此 `arcTo` 的工作已经完成，接下来你可以 `stroke()` 或者 `fill()` 了

来看一个绘制过程：

function drawScreen () {
        ctx.lineWidth = 1;
        ctx.strokeStyle = '#f36';
        ctx.fillStyle = 'red';
    
        // 一个起始点 ( 100, 50 ), 那么绘制其点. 颜色设置为红色
        ctx.fillRect( 100 - 4, 50 - 4, 8, 8 );
        // 两个参考点分别为 ( 100, 200 ) 和 ( 300, 200 ), 绘制出该点
        ctx.fillRect( 100 - 4, 200 - 4, 8, 8 );
        ctx.fillRect( 300 - 4, 200 - 4, 8, 8 );
    
        // 连接两个参考点
        ctx.beginPath();
        ctx.strokeStyle = 'red';
        ctx.moveTo( 100, 200 );
        ctx.lineTo( 300, 200 );
        ctx.stroke();
    
        // 调用 arcTo 方法绘制圆弧. 记得将起始点设置为 ( 100, 50 )
        ctx.beginPath();
        ctx.strokeStyle = 'blue';
        ctx.moveTo( 100, 50 );
        ctx.arcTo( 100, 200, 300, 200, 80);
        ctx.stroke();
    }

![canvas-8-13.gif][]

### 绘制带圆角矩形 ###

在学习Canvas中[绘制矩形][Link 2]一节时，我们提到通过`lineJoin`改变线段端点形状来模拟一个圆角矩形。通过这样的方法绘制带圆角的矩形，局限性还是非常大的。不过值得庆達的是，`acrTo()`可以轻易实现两线内切圆弧，言外之意，使用`arcTo()`来绘制一个圆角矩形是非常的方便。

圆角矩形是由四段线条和四个`1/4`圆弧组成，拆解如下。

![canvas-8-14.jpg][]

如此一来，我们就可以封装一个函数，用来绘制圆角矩形。根据上图，我们可以给这个函数，比如`drawRoundedRect()`函数传递对应的参数：

*  `ctx`：Canvas画布绘图环境
 *  `x,y`：左上角
 *  `width`：矩形宽度
 *  `height`：矩形高度
 *  `r`：矩形圆角半径
 *  `fill`： 绘制一个填充的矩形
 *  `stroke`：绘制一个边框矩形

开始封装函数：

函数封装好之后，只需要调用，就可以轻易绘制出带圆角的矩形，而且简单易用：

function drawScreen () {
    
        ctx.strokeStyle = 'rgb(150,0,0)';
        ctx.fillStyle = 'rgb(0,150,0)';
        ctx.lineWidth = 7;
        drawRoundedRect(ctx, 30, 50, 200, 220, 20, true, true);
    
        ctx.strokeStyle = 'rgb(150,0,150)';
        ctx.fillStyle = 'rgba(0,0,150,0.6)';
        ctx.lineWidth = 7;
        drawRoundedRect(ctx, 300, 100, 250, 150, 8, true, false);
    }

[![canvas-8-15.png][]][canvas-8-15.png 1]

是不是很简单。可以来个复杂点的练习。比如，当初火热的2048游戏。

![canvas-8-16.png][]

使用`drawRoundedRect()`函数就可以很轻易的绘制出来，有兴趣的同学不仿一试。

## 绘制月亮 ##

这节主要学习了`arc()`和`arcTo()`两个方法，学习了怎么使用这两个方法在Canvas中如何绘制圆弧或圆。那么我们来看一个小示例，结合两者来绘制一月亮。

用一张图来阐述绘制月亮的原理：

![moon.jpg][]

此图已经说明一切，直接上代码吧：

## 总结 ##

在Canvas中，`CanvasRenderingContext2D`对象提供了两个方法（`arc()`和`arcTo()`）来绘制圆和圆弧。其中`arc()`即可绘制弧线，圆，也可以绘制扇形，但`arcTo()`仅能绘制出弧线。但`arcTo()`可以更轻易的帮助我们实现带圆角的矩形。到目前为止，我们学习了在Canvas中绘制线段、矩形、弧线和圆等，但基本图形不仅仅这些，接下来我们将学习如何在Canvas中绘制箭头。感兴趣的同学，欢迎持续关注相关更新。

### <3>H5 canvas arc()绘制圆形/圆环 ###

原文链接：[http://caibaojian.com/html5-canvas-arc.html][http_caibaojian.com_html5-canvas-arc.html]

## [JavaScript][] 语法 ##

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

## 参数值 ##

<table> 
 <tbody> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><em>x</em></td> 
   <td>圆的中心的 x 坐标。</td> 
  </tr> 
  <tr> 
   <td><em>y</em></td> 
   <td>圆的中心的 y 坐标。</td> 
  </tr> 
  <tr> 
   <td><em>r</em></td> 
   <td>圆的半径。</td> 
  </tr> 
  <tr> 
   <td><em>sAngle</em></td> 
   <td>起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。</td> 
  </tr> 
  <tr> 
   <td><em>eAngle</em></td> 
   <td>结束角，以弧度计。</td> 
  </tr> 
  <tr> 
   <td><em>counterclockwise</em></td> 
   <td>可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。</td> 
  </tr> 
 </tbody> 
</table>

## 图解 ##

提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2\*Math.PI。

提示：请使用 [stroke()][stroke] 或 [fill()][fill] 方法在画布上绘制实际的弧。[·][http_caibaojian.com_html5-canvas-arc.html]

[![arc][]][arc]

*  中心：arc(100,75,50,0\*Math.PI,1.5\*Math.PI)
 *  起始角：arc(100,75,50,0,1.5\*Math.PI)
 *  结束角：arc(100,75,50,0\*Math.PI,1.5\*Math.PI)

## 实例 ##

创建一个圆形：  
  
Your browser does not support the HTML5 [canvas][] tag.  
  
  
[JavaScript][]:

//code from http://caibaojian.com/html5-canvas-arc.html
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(100,75,50,0,2*Math.PI);
    ctx.stroke();

## 延伸案例 ##

我们用6个图形组合成一个八卦的图形。

[![原文来自http://caibaojian.com/html5-canvas-arc.html][http_caibaojian.com_html5-canvas-arc.html 1]][http_caibaojian.com_html5-canvas-arc.html 1]

<!DOCTYPE HTML> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>无标题文档</title> 
     
     
    <script type="text/javascript"> 
    window.onload = function(){ 
    var ctx = document.getElementByIdx_x_x_x("pic").getContext('2d'); 
     
    //绘制白色半圆的代码如下： 
    ctx.beginPath(); 
    ctx.arc(200,200,80,1.5*Math.PI,Math.PI/2,false); 
    ctx.fillStyle="white"; 
    ctx.closePath(); 
    ctx.fill(); 
     
    //绘制黑色半圆的代码如下： 
    ctx.beginPath(); 
    ctx.arc(200,200,80,Math.PI/2,1.5*Math.PI,false); 
    ctx.fillStyle="black"; 
    ctx.closePath(); 
    ctx.fill(); 
     
    //绘制黑色小圆 
    ctx.beginPath(); 
    ctx.arc(200,240,40,0,Math.PI*2,true); 
    ctx.fillStyle="black"; 
    ctx.closePath(); 
    ctx.fill(); 
     
    //绘制白色小圆 
    ctx.beginPath(); 
    ctx.arc(200,160,40,0,Math.PI*2,true); 
    ctx.fillStyle="white"; 
    ctx.closePath(); 
    ctx.fill(); 
     
    //绘制白色小圆心 
    ctx.beginPath(); 
    ctx.arc(200,160,5,0,Math.PI*2,true); 
    ctx.fillStyle="black"; 
    ctx.closePath(); 
    ctx.fill(); 
     
    //绘制黑色小圆心 
    ctx.beginPath(); 
    ctx.arc(200,240,5,0,Math.PI*2,true); 
    ctx.fillStyle="white"; 
    ctx.closePath(); 
    ctx.fill(); 
     
    //绘制文字代码如下： 
    ctx.save(); 
    ctx.fillStyle="black"; 
    ctx.globalAlpha="0.4"; 
    ctx.textAlign="center"; 
    ctx.font="32px Arial"; 
    ctx.shadowColor="rgba(0,0,0,0.4)"; 
    ctx.shadowOffsetX=15; 
    ctx.shadowOffsetY=-10; 
    ctx.shadowBlur=2; 
    ctx.fillText('Hello Canavs',200,100);//IE不支持 
     
    ctx.restore(); 
    } 
    </script> 
    </head> 
     
    <body> 
    <canvas id="pic" width="400" height="400" style="border:1px solid; background:#E1E1FF;"></canvas> 
    </body> 
    </html>

今天很晚了，下一篇再说如何绘制圆环，以及动画效果和渐变效果。

文章目录

*  JavaScript 语法
 *  参数值
 *  图解
 *  实例
 *  延伸案例

[canvas][],[HTML5][],[JavaScript][] 推荐文章

*  [Canvas实现直线与圆形的物理运动效果][Canvas]
    
    导语：之前写过几篇关于Canvas实现圆环动画的文章，例如这篇：canvas绘制旋转的圆环百分比进度条和使用HTML5 Canvas arc()绘制圆形/圆环，实现方法是通过循环绘制圆环（圆饼）等来实现，今天来看看这篇：基于canvas实现 ...
 *  [使用canvas来绘制图形][canvas 1]
    
    原文：Mozilla 栅格 在我们开始画图之前，我们需要了解一下画布栅格（Canvas grid）以及坐标空间。上一页中的HTML模板中有个宽150px, 高150px的canvas元素。如右图所示，canvas元素默认被网格所覆盖。通常来 ...
 *  [HTML5 Canvas属性和方法][HTML5 Canvas]
    
    通过HTML5 Canvas标签，结合JavaScript API来绘制比较常见的图片，如三角形、矩形、线、圆形或圆环等形状，本文将分享canvas中给出的JavaScript属性和方法，了解这些API，能够助你快速上手canvas的绘制。
 *  [HTML5 Canvas绘制矩形和圆形（圆弧）][HTML5 Canvas 1]
    
    Canvas绘制矩形、圆形和圆弧。在canvas里面有特定的方法来绘制矩形。rect(x,y,width,height);或者fillRect(x,y,width,height)从(x,y)为起始点，长尾width，高为height的填充矩 ...
 *  [HTML5实现动画三种方式][HTML5 1]

### <4>canvas 画圆环进度条 ###

*  代码

1.  HTML
    
        ```
    
      
    <canvas id="circle" height="132px" width="132px">  
    </canvas>
2.  JS

```
    circle();
    function circle() {
        var canvas = document.getElementById('circle');
        var ctx = canvas.getContext("2d");
    
        /*填充文字*/
    
        ctx.font = "18px Microsoft YaHei";
        /*文字颜色*/
        ctx.fillStyle = '#4b4d4e';
        /*文字内容*/
        var insertContent = '语言';
        var text = ctx.measureText(insertContent);
        /*插入文字，后面两个参数为文字的位置*/
        /*此处注意：text.width获得文字的宽度，然后就能计算出文字居中需要的x值*/
        ctx.fillText(insertContent, (132 - text.width) / 2, 58);
    
        /*填充百分比*/
        ctx.fillStyle = '#e24464';
        var ratioStr = '25%';
        var text = ctx.measureText(ratioStr);
        ctx.fillText(ratioStr, (132 - text.width) / 2, 85);
    
        /*开始圆环*/
        var circleObj = {
            ctx: ctx,
            /*圆心*/
            x: 66,
            y: 66,
            /*半径*/
            radius: 55,
            /*环的宽度*/
            lineWidth: 22
        }
    
        /*有色的圆环*/
        /*从-90度的地方开始画*/
        circleObj.startAngle = 0;
        /*从当前度数减去-90度*/
        circleObj.endAngle = Math.PI * 2 * 0.25;
        circleObj.color = '#e24464';
        drawCircle(circleObj);
    
        /*灰色的圆环*/
        /*开始的度数-从上一个结束的位置开始*/
        circleObj.startAngle = circleObj.endAngle;
        /*结束的度数*/
        circleObj.endAngle = Math.PI * 2;
        circleObj.color = '#e9e9e9';
        drawCircle(circleObj);
    
    }
    /*画曲线*/
    function drawCircle(circleObj) {
        var ctx = circleObj.ctx;
        ctx.beginPath();
        ctx.arc(circleObj.x, circleObj.y, circleObj.radius, circleObj.startAngle, circleObj.endAngle, false);
        //设定曲线粗细度
        ctx.lineWidth = circleObj.lineWidth;
        //给曲线着色
        ctx.strokeStyle = circleObj.color;
        //连接处样式
        ctx.lineCap = 'round';
        //给环着色
        ctx.stroke();
        ctx.closePath();
    }
    
    ```

*  其他
    
    如果要实现这样的效果
    
     
    
    ![Image 1][]
    
    目标效果
    
    1.  先画灰色的圆环，再画有色的圆环；
    2.  从-90度开始开始画。

###       <5>画空心圆和实心圆 ###

复制代码

代码如下:  
var canvas=document.getElementById("canvas");  
var cxt=canvas.getContext("2d");  
//画一个空心圆  
cxt.beginPath();  
cxt.arc(200,200,50,0,360,false);  
cxt.lineWidth=5;  
cxt.strokeStyle="green";  
cxt.stroke();//画空心圆  
cxt.closePath();  
//画一个实心圆  
cxt.beginPath();  
cxt.arc(200,100,50,0,360,false);  
cxt.fillStyle="red";//填充颜色,默认是黑色  
cxt.fill();//画实心圆  
cxt.closePath();  
//空心和实心的组合  
cxt.beginPath();  
cxt.arc(300,300,50,0,360,false);  
cxt.fillStyle="red";  
cxt.fill();  
cxt.strokeStyle="green";  
cxt.stroke();  
cxt.closePath();

[Image 1]: 
[Link 1]: https://www.w3cplus.com/canvas/draw-lines.html
[Link 2]: https://www.w3cplus.com/canvas/drawing-rectangular.html
[Link 3]: https://www.w3cplus.com/canvas/canvas-coordinate-system.html
[canvas-8-1.png]: /images/20220514/8b1211ed78c74022ae0d8b51dc7264e5.png
[Link 4]: https://zh.wikipedia.org/wiki/%E5%BC%A7%E5%BA%A6
[Radian_cropped_color.svg]: /images/20220514/51b52fb6cd1f4c119843de046cd40a87.png
[Radian-common.svg]: /images/20220514/0053bd4405f84de8b323fedc4ce891c7.png
[Unit_circle_angles.svg]: /images/20220514/e1bdb00b62c94164bc6ac33ffc644ff2.png
[Link 5]: https://zh.wikipedia.org/wiki/%E6%AD%A3%E5%88%87
[Link 6]: https://zh.wikipedia.org/wiki/%E4%B8%89%E8%A7%92%E5%87%BD%E6%95%B0
[Link 7]: https://zh.wikipedia.org/wiki/%E5%A5%87%E5%87%BD%E6%95%B0
[Circle-trig6.svg]: /images/20220514/e72137bdae234f74ae3307df3456d77f.png
[canvas-8-2.jpg]: /images/20220514/90e1cb6057d544449c8d740b848ccd58.png
[canvas-8-3.png]: /images/20220514/1f2dc67f4b084e2caf415ceedd13f1a3.png
[canvas-8-3.png 1]: https://codepen.io/airen/full/PpOOwG/
[canvas-8-4.png]: /images/20220514/cf4f01493d754d398676152c4228d304.png
[canvas-8-4.png 1]: https://codepen.io/airen/full/BWmrXr/
[canvas-8-5.png]: /images/20220514/05431176bcdb4b5db9376fdd7dd01ad2.png
[canvas-8-5.png 1]: https://codepen.io/airen/full/pedVzY/
[canvas-8-6.png]: /images/20220514/486b0686ee0d4796b21ecb837813b70d.png
[canvas-8-6.png 1]: https://codepen.io/airen/full/Npwwgw/
[canvas-8-7.png]: /images/20220514/d9f1896e87b4415bba81ac2499d8dcd6.png
[canvas-8-8.png]: /images/20220514/dcfeb3020e5a409d932a14fd4d06ef27.png
[canvas-8-8.png 1]: https://codepen.io/airen/full/pedVOv/
[canvas-8-9.png]: /images/20220514/c45c14adabd2430fabf4a429c318b9f2.png
[canvas-8-9.png 1]: https://codepen.io/airen/full/wJPPQy/
[canvas-8-10.png]: /images/20220514/5d043e43c42d486eaeaf5ccbd80de04f.png
[canvas-8-10.png 1]: https://codepen.io/airen/full/zZPaaj/
[canvas-8-11.png]: /images/20220514/8abf835d70e84b2683e66dbfcdf8d634.png
[canvas-8-12.png]: /images/20220514/614277a3ad03450c9ec9e36579f79949.png
[canvas-8-13.gif]: /images/20220514/aa98da24e53144019cc7b8f96363ef96.png
[canvas-8-14.jpg]: /images/20220514/8dacdebc99444885ab1b16c91d4990d7.png
[canvas-8-15.png]: /images/20220514/30d55dd7108e450db23d644579fe90dd.png
[canvas-8-15.png 1]: https://codepen.io/airen/full/EWbOPG/
[canvas-8-16.png]: /images/20220514/24c3668f577042cf9bcfd79de8e3b5ab.png
[moon.jpg]: /images/20220514/25556df71ca748e9a32dca85e627873a.png
[http_caibaojian.com_html5-canvas-arc.html]: http://caibaojian.com/html5-canvas-arc.html
[JavaScript]: http://caibaojian.com/t/javascript
[stroke]: http://caibaojian.com/w3school/html5/canvas_stroke.asp.htm
[fill]: http://caibaojian.com/w3school/html5/canvas_fill.asp.htm
[arc]: /images/20220514/f93f49661c8f4295987f54ab8fc2464f.png
[canvas]: http://caibaojian.com/t/canvas
[http_caibaojian.com_html5-canvas-arc.html 1]: /images/20220514/f9249c4fffc646ec929d2f3de8f3371c.png
[HTML5]: http://caibaojian.com/t/html5
[Canvas]: http://caibaojian.com/canvas-draw-circle-line.html
[canvas 1]: http://caibaojian.com/canvas-draw-image.html
[HTML5 Canvas]: http://caibaojian.com/html5-canvas.html
[HTML5 Canvas 1]: http://caibaojian.com/html5-canvas-circular.html
[HTML5 1]: http://caibaojian.com/3-html5-animations.html