canvas学习之路第二档CanvasRenderingContext2D对象相关api的方法系列

CanvasRenderingContext2D对象

其实上一章，我们就是在说CanvasRenderingContext2D对象的一些api，接下来我们就进一步的巩固下他的api使用

1. arc()

arc第一章是有的，

2. arcTo()

主要是给路径添加圆弧用的,方法比较多的用途是绘制标准圆角
语法:arcTo(x1, y1, x2, y2, radius);

x1：第一个控制点的横坐标
y1：第一个控制点的纵坐标
x2：第一个控制点的横坐标
y2：第一个控制点的纵坐标
radius：圆弧半径的大小

	context.beginPath() // 开始画图
    context.moveTo(50,50)  //绘制路径的起点是50，50这个坐标
    context.arcTo(150,100,200,40,40) // 这个上面已经说明参数意思
    context.lineTo(200,40) // 用于绘制直线，以用于路径的落点
    context.stroke() //对绘制的路径，进行描边儿

3.beginPath()

代表开始一个新的路径，直接上代码解释，这个不多解释了，

 	context.beginPath() //第一条线的开始
    context.fillStyle = 'yellow'
    context.moveTo(10, 10) //第一条线的起点
    context.lineTo(60, 30) // 第二条线的终点
    context.fill() // 颜色进行填充
    context.stroke() // 根据路径花划线

    context.beginPath() //第二条线的开始
    context.fillStyle = 'blue' //颜色的填充
    context.moveTo(60, 30) //第二条线的起点
    context.lineTo(10, 100) //第二条线的终点
    context.fill() 
    context.stroke()

4. bezierCurveTo()

这个是用来绘制贝塞尔曲线的，需要三个控制点，
咱们直接上语法
语法：

context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

cp1x：第一个控制点的横坐标。
cp1y：第一个控制点的纵坐标。
cp2x：第二个控制点的横坐标
cp2y：第二个控制点的纵坐标
x：结束点的横坐标
y：结束点的纵坐标

 	context.beginPath()
    context.moveTo(30,50)
    context.bezierCurveTo(100,100,200,40,250,100)
    context.stroke()

5. clearRect()

可以把canvas的某片矩形区域变透明
在Canvas动画绘制中非常常用，不断清除画布内容再绘制，形成动画效果
语法：

context.clearRect(x, y, width, height);

x:矩形左上角的x坐标
t:矩形左上角的y坐标
width:被清除的矩形区域的高度
height:被清除的矩形区域的宽度