canvas API ，通俗的canvas基础知识（二）(3)_H5之家

注意，这里的角度是用弧度表示的，不是直接写角度，那问题来了，一般我们知道一个圆弧是多少度，怎么知道它是多少弧度呢？总感觉弧度太抽象，嗯嗯，我也有同感，那我们就来科普一下弧度的算法吧，列几个公式（初中，高中的数学，都还给老师了）：

1弧度 = r;

360° = 2∏;

周长C = 2∏r;

那么一周的弧度数 =2∏r/r =2∏ =360°

则1° = 2∏*1°/360° =∏*1° /180° （弧度）

90° =∏*90° /180° （弧度）

圆的初始位置是在最右边，跟我们自己手绘圆的起点有那么一点点的不一样，默认是顺时针方向，那角度就应该是如图所示的角度，要是还不清楚的话，我们画2半圆，分别表示顺时针和逆时针，这样就应该清楚了，哦，需要说明的一点就是，画用的方法跟画直线和矩形框的原理是一样的，只是画出了路径，并没有添墨水，仍需用黑白双煞：

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(80,100,50,0,180*Math.PI/180,false); ctx.stroke();
ctx.beginPath(); ctx.arc(200,100,50,0,180*Math.PI/180,true); ctx.stroke();

js里面是没有∏的，你懂的，但是有函数Math.PI，咦，这里为什么是圆弧而不是半圆啊，如果我要画一个半圆怎么弄呢？哈哈~，还记得上面三角形的那个折线吗？这个是一个原理，只是图形没有闭合而已，用closePath()就可以闭合了。

画一个扇形看看，这里我就闭合图形哈：

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(80,100,50,30*Math.PI/180,150*Math.PI/180,false); ctx.closePath(); ctx.stroke();

当当当当~~~

噗，喷了一口老血，怎么是一条小船，说好的扇子呢？再看看三角图形，瞬间就明白了，图形闭合不是以圆心为起始点的，而是初始弧度为起点，然后闭合的时候是回到初始点，就变成小船了，那怎么才能画出一个扇形呢？给个思路，这里暂时不给代码，以后有时间当小实例给到大家，如果我以圆心为起点，画2条直线，连到圆弧的起始点和结束点，是不是就是一个扇形了，哈哈~，不多说了，脑补一下吧，当然，圆弧的起始点的坐标和结束点的坐标计算还是有点费劲的

前面我们画的是空心的圆或弧，可否画实心的呢？貌似问的有点多余，上面说了用黑白双煞，好吧，直接给个一饼好了：

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.arc(150,150,50,0,360*Math.PI/180,false); ctx.fill();

咦，怎么这么像某岛国国旗，还好我用的是默认黑色，嘘嘘，都没看到哈~

还有一个方法可以画圆弧：

arcTo(x1,y1,x2,y2,r) 创建两个切线之间的弧/曲线

参数：x1,y1 表示第一个坐标，x2,y2表示第二个坐标，r表示曲线半径

两个切线之间的曲线，试试：

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(100,20); ctx.arcTo(150,20,150,70,50); ctx.lineTo(150,120); ctx.stroke();

果然是要在两条线段之间写曲线，要是先写2条曲线，在写arcTo()，貌似就出不来了，这让我们想到了moveTo(),lineTo()，再写一个例子：

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.moveTo(150, 20); ctx.arcTo(150,200,50,0,20); ctx.stroke();

想试一下，要是只有一条切线，会怎样？

好大的一个鱼钩啊，看来这样也是可以的，要是没有切线，可否？

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.arcTo(150,200,50,0,20); ctx.stroke();

额，狗带了，没反应，看来必须至少有一个切线才能画弧线，有个点都行，要求不算高，满足你。

感觉这里始终没有将清楚，arcTo()为什么会画出这样的曲线呢，我觉得有必要画一张图来表示：

它的绘图原理应该是这样的，起始点是圆弧的第一个切点，也是画笔的起始点，然后arcTo的两个坐标点分别是圆弧的起点和终点，这样3个点就形成了2天相交的线，然后以半径为r画一个圆，与这2条线相切，2个切点就是绘制的这条弧，而第二张图就是arcTo()所绘制的图形，为了证实这一点，我们写一个相近的图形来看看：

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.fillRect(100,100,5,5); ctx.fillRect(180,80,5,5); ctx.fillRect(160,180,5,5); ctx.moveTo(62,112); ctx.lineTo(182,82); ctx.lineTo(162,182); //这里是绘制切线弧 ctx.moveTo(103,103); ctx.arcTo(183,83,162,182,40); ctx.stroke();