canvas学习笔记（画圆）

canvas是html5标签，用来绘制图像。该标签是容器，我们通过js脚本来绘制图形。

<canvas>的简单实例（画个圆，面试遇到过)：

1.首先我们在body中声明一个canvas

<canvas  id="yuan"  width="200px"  height="200px"></canvas>

2.然后通过js来绘制圆形

var x=document.getElementById("yuan")
var y=x.getContext("2d")
y.fillStyle="red"
y.beginPath()
y.arc(100,100,50,0,2*Math.PI,true)
y.closePath()
y.fill()

其中：

getContext() 方法返回一个用于在画布上绘图的环境。当前唯一的合法值是 "2d"，该对象导出一个二维绘图 API

fillStyle用来设置或返回用于填充绘画的颜色、渐变或模式

beginPath() 方法开始一条路径，或重置当前的路径。

closePath() 方法创建从当前点到开始点的路径。

fill() 方法填充当前的图像（路径）。默认颜色是黑色。

arc() 方法创建弧/曲线（用于创建圆或部分圆）  前两个参数是中心点坐标，第三个参数是半径，第四个参数是起始角，第五个参数是结束角，最后一个参数可不填，true为逆时针，false为顺时针。

 

另外，什么时候需要用调用beginPath()呢？

beginPath(）会产生一条新路径，如果不调用该方法，永远只会在一条路径上绘制

而closePath()会闭合这条beginPath()开始的路径，而不会再产生一条新路径，所以如果要产生新的路径  必须再调用beginPath(）