canvas的绘制学习-1

canvas提供了三种绘制矩形的方式

fillRect(x, y, width, height) //绘制一个填充的矩形

clearRect(x, y, width, height) //清除指定矩形区域，让清除部分完全透明(在大矩形 的内部使用，掏空大矩形)

strokeRect(x, y, width, height) //绘制一个矩形的边框
例子
function draw() {
var canvas = document.getElementById(‘canvas’);
if (canvas.getContext) {
var ctx = canvas.getContext(‘2d’);

ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);

}
}
fillRect()函数绘制了一个边长为100px的黑色正方形。clearRect()函数从正方形的中心开始擦除了一个6060px的正方形，接着strokeRect()在清除区域内生成一个5050的正方形边框。

接下来我们能够看到clearRect()的两个可选方法，然后我们会知道如何改变渲染图形的填充颜色及描边颜色
绘制路径
beginPath() //新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径
moveTo(x, y) //移动笔触(确定绘制图形的位置,x,y坐标)
closePath() //闭合路径之后图形绘制命令又重新指向到上下文中使用
stroke() //通过线条来绘制图形轮廓(生成只有描边的图形)
fill() //通过填充路径的内容区域生成实心的图形(这个结束画图的话，会生成有背景色的图形)
lineTo(x, y) //绘制一条从当前位置到指定x以及y位置的直线，一般用来画线组成不规则图形
arc(60,65,5,0,Math.PI*2,true) //绘制圆，最后一个为true的话，说明是绘制一个圆形闭合的圆
arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
arcTo(x1, y1, x2, y2, radius) //根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点

quadraticCurveTo(cp1x, cp1y, x, y)
绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。
贝塞尔曲线一般用来绘制一些不规则弧度的图形，例如心形图案，对话气泡框等，
绘制图形如果想要填充的就义fill()结尾，如果想要轮廓形的就以stroke()结尾