canvas知识点总结

canvas知识点总结

1、基本元素的使用

1、画边：stroke
2、填充：fill
3、画边样式：strokeStyle
4、填充样式：fillStyle

2、绘制基本图形

1、矩形：rect
2、填充矩形：fillRect
3、描边矩形：strokeRect
4、透明矩阵：clearRect
5、圆形：arc
6、圆形路径：arcTo

3、画线

1、起始点：moveTo
2、经过点：lineTo
3、线宽度：lineWith
4、线两端样式：lineCap
5、线拐弯样式：lineJoin

4、canvas栈操作

1、样式压栈：save
2、样式弹栈：restore
3、清除路径栈：beginPath

5、变换

1、原点坐标移动：translate
2、旋转坐标轴：rotate
3、原点为圆心进行缩放：scala

6、绘制文本

1、字体大小：font  （例如，ctx.font="60px aaa"，后面一定要随便加点东西，样式才能生效）
2、文字基线对齐方式：textBaseline
3、填充方式：fillText
4、测量文字对象：measureText

7、图片操作

1、绘制图片到canvas：drawImageData
2、获取canvas中的图片对象：getImageData
3、将imageData对象放入到canvas中：setImageData
4、创建imageData对象：createImageData

8、合成操作

新的路径：source
            source-over：新路径覆盖
            source-in：只有新旧路径重合的区域
            source-out：除去新路径和旧路劲重叠部分
            source-atop
旧的路径：destination：
			destination-over
            destination-in
            destination-out
            destination-atop

9、其他操作

1、导出图像：toDataURL
2、判断路径上是否有这个点：isPointInPath