Canvas基础学习笔记（一）

基础绘图 （笔记摘自菜鸟教程 http://www.runoob.com/html/html5-canvas.html）

1、getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

2、设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。

3、fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

4、canvas 是一个二维网格。canvas 的左上角坐标为 (0,0)

5、在Canvas上画线，moveTo(x,y) 定义线条开始坐标，lineTo(x,y) 定义线条结束坐标；定义开始坐标(0,0), 和结束坐标 (200,100)，然后使用 stroke() 方法来绘制线条

6、把一幅图像放置到画布上, drawImage(image,x,y)

7、fillStyle = color 设置图形的填充颜色，

strokeStyle = color 设置图形轮廓的颜色

8、线的属性

lineWidth：线宽，默认是1.0

lineCap：线条末端样式，三个值：butt、round、square

lineJoin：线条接合处的样式，三个值：round、bevel、miter

setLineDash([20,5])：20为实线长度，5为间隙长度 lineDashOffset：起始偏移量

save：保存为默认状态，restore：恢复到默认状态

translate：变动原点

rotate：旋转

scale：对横轴、纵轴进行缩放

9、图形合成

globalCompositeOperation的值：

默认：新加覆盖原有	destination-over 新加在原有底下
source-in 显示新图像重叠部分	source-out 显示新图像未重叠部分
source-atop 显示老图像，以及新图像的重叠区	destination-atop 显示新图像，以及老图像重叠区
destination-in 显示老图像重叠部分	destination-out 显示老图像未重叠部分

10、clip 遮罩功能