canvas图形绘制

基于状态绘图 ,每次绘制都会检查所有状态
context.beginPath()//全新的路径绘制
context.closePath()
beginPath和lineTo合用相当于moveTo
beginPath和closePath合用解决闭合处问题

fillStyle() fill()
先描边后填充的话，填充会覆盖掉线条的一半
解决方法：先填充后描边

context.rect（x,y,width,height）
context.fillRect(x,y,width,height)
context.strokeRect(x,y,width,height)
context.clearRect(x,y,width,height)//清空

context后绘制的图形会覆盖前面图形

线条的属性：
lineCap:butt(default) square[多出方头]round[多出一半的圆头]
只能用于开头和结尾，不能用于衔接处
lineJoin:miter(default) bevel[斜接] round[圆角]
miterLimit：10 ，超过即用bevel

图形变化的机制
图形变化会叠加，如使用两次translate（100,100）translate（300,300）最后一次translate会叠加至400,400
解决方法：context.save();context.restore()返回save之前的状态
rotate(x,y)
scale（deg）//不仅仅放大图标的大小，也会缩放坐标、边框
translate(sx,sy)//改变基坐标

transform(a,b,c,d,e,f)变换矩阵[继续学习]
setTransform()

填充或描边类型
fillStyle/strokeStyle:gradient pattern color

线性渐变：渐变线可以水平、垂直 、倾斜
var grd=context.createLinearGradient(xstart,ystart,xend,yend)
grd.addColorStop(floatend,color)
如果渐变线只指定了canvas的一部分区域，则最前面的渐变色或最后边的渐变色补充不足的区域
radial gradient
var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1)

图片填充createPattern
createPattern(img/canvas/video,repeat-style)
no-repeat repeat-y repeat-x repeat
【填充canvas】

曲线的绘制：
arc
context.arc(centerx,centery,radius,startAngle,endingAngle,anticlockwise=false)
不论逆时针还是顺时针，angle是保持不变的
【画带弧线的圆角矩形】【画2048】

arcTo(x1,y1,x2,y2,radius)
(x0,y0)由moveTo或lineTo决定
【画月亮】

字体样式：
context.font="bold 40px Arial"
context.font="20px sans-serif"//默认
font-style:normal italic/斜体字/ oblique/字体角度倾斜/
font-variant:normal small-caps/小型大写字母/
font-weight:lighter normal bold bolder
font-size:20px 2em 150%
font-family: @font-face
文本对齐
context.textAlign=left|center|right
context.textBaseline=top|middle|bottom|alphabetic(基于拉丁)|ideographic(方块文字)|hanging(印度语)

文本的度量：
context.measureText(string).width//根据设置的font属性计算文本宽度
【填词系统】
context.fillText(string,x,y,[maxlen])
context.strokeText(string,x,y,[maxlen])

阴影绘制
context.shadowColor
context.shadowOffsetX
context.shadowOffsetY
context.shadowBlur//控制边缘模糊程度

global【碰撞的小球】
globalAlpha=1(default)//全局透明度
globalCompositeOperation//图形的压盖 情况，默认后绘制的图形压盖前面绘制的图形
="source-over"(default)|destination-over
source-over|source-atop|source-in|source-out
destination-over|destination-atop|destination-in|destination-out
lighter//重叠部分冲计算颜色
copy
xor

剪辑区域【探照灯】
context.clip()//剪切自定义的区域为绘制环境

非零环绕原则【剪纸效果】
判断内侧和外侧

canvas与浏览器的兼容
用户提示文字
canvas.elipse
explorecanvas老式浏览器托管

---未完待更----