html5高级程序设计（canvas笔记）

context.beginPath()：开始绘制新图形，最大的用处是canvas需要据此来计算图形的内部和外部范围，以便完成后续的描边和填充。

context.moveTo(x,y)：不绘制，只是将当前位置移动到新的目标坐标（x,y）。（提起画笔移动到新位置）

context.lineTo(x,y)：不仅将当前位置移动到新的目标坐标（x,y）,而且在两个坐标之间画一条直线。（用画笔从纸上的旧坐标画条直线到新坐标）

context.closePath()：闭合路径

context.stroke()：绘制路径

context.lineWidth = 5; 加宽线条

context.lineJoin = "round";   平滑路径的接合点

context.strokeStyle = "red";   将颜色改为红色

context.fillStyle = '#339900';    设置填充颜色

context.fill();  对背景进行填充

context.fillRect(x,y,宽,高)  对背景的填充范围

context.quadraticCurveTo(起点X，起点Y，终点X，终点Y)  绘画曲线

context.drawImage(oImg,x,y,宽,高)  对背景进行图片填充

context.arc(x,y,radius,startAngle,endAngle,anticlockwise);  //.arc(圆点,圆点,半径大小,起始弧度，结束弧度，画圆的方向)

1.context.arc(200,160,40,0,Math.PI*2,false); 圆

2.context.arc(200,200,80,Math.PI/2,Math.PI*1.5,false);半圆

文字类：

context.fillStyle = "black";
context.globalAlpha = '0.8';
context.textAlign = 'center';
context.font = '32px Arial';
context.shadowColor = "rgba(0,0,0,0.3)";
context.shadowOffsetX = 15;
context.shadowOffsetY = 10;
context.shadowBlur = 5;
context.fillText('Hellow Canvas111', 200 ,100)

context.restore();

bezierCurveTo绘制贝济埃曲线：（可以绘制任何形状的图形）

绘制方法context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
cp1x为第一个控制点的横坐标
cp1y为第一个控制点的纵坐标
cp2x为第二个控制点的横坐标
cs2y为第二个控制点的纵坐标
x为贝济埃曲线的终点横坐标
y为贝济埃曲线的终点纵坐标