四、canvas

        1.路径容器
            每次调用路径api时,都会往路径容器里做登记
            调用beginPath时,清空整个路径容器
        2.样式容器
            每次调用样式api时,都会往样式容器里做登记
            调用save时候,将样式容器里的状态压入样式栈
            调用restore时候,将样式栈的栈顶状态弹出到样式容器里,进行覆盖
        3.样式栈
            调用save时候,将样式容器里的状态压入样式栈
            调用restore时候,将样式栈的栈顶状态弹出到样式样式容器里,进行覆盖

阻止IE6下的默认行为：

image.png

day09

1.注意点
    ---canvas图像的渲染有别于html图像的渲染，
            canvas的渲染极快，不会出现代码覆盖后延迟渲染的问题
            写canvas代码一定要具有同步思想
    ---在获取上下文时，一定要先判断
    ---画布高宽的问题
        画布默认高宽300*150
        切记一定要使用html的attribute的形式来定义画布的宽高
        通过css形式定义会缩放画布内的图像
    ---绘制矩形的问题
        a.边框宽度的问题，边框宽度是在偏移量上下分别渲染一半，可能会出现小数边框，
            一旦出现小数边框都会向上取整
        b.canvas的api只支持一种图像的直接渲染：矩形
    ---我们没法使用选择器来选到canvas中的图像
2.画布api
    oc.getContext("2d");
    oc.width
    oc.height
3.上下文api
    ctx.fillRect(x,y,w,h):填充矩形
    ctx.strokeRect(x,ymwmh):带边框的矩形
    ctx.clearRect(0,0,oc.width,oc.height):清除整个画布
        注意原点的位置
    ctx.fillStyle
    ctx.strokeStyle
    ctx.lineWidth
    ctx.lineCap
    ctx.lineJoin
    ctx.moveTo(x,y):将画笔抬起点到x，y处
    ctx.lineTo(x,y):将画笔移到x，y处
    ctx.rect(x,y,w,h)
    ctx.arc(x,y,r,degS,degE,dir)
    ctx.arcTo(x1,y1,x2,y2,r):2个坐标，一个半径
            结合moveTo(x,y)方法使用，
            x,y:起始点
            x1,y1：控制点
            x2,y2：结束点
    ctx.quadraticCurveTo(x1,y1,x2,y2)
            结合moveTo(x,y)方法使用，
            x,y:起始点
            x1,y1：控制点
            x2,y2：结束点
            必须经过起点和终点
    ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3)
            结合moveTo(x,y)方法使用，
            x,y:起始点
            x1,y1：控制点
            x2,y2：控制点
            x3，y3：结束点
            必须经过起点和终点
    ctx.fill()
    ctx.stroke()
    
    ctx.beginpath():清除路径容器
    ctx.closepath():闭合路径
        fill自动闭合
        stroke需要手动闭合
    ctx.save()
        将画布当前状态(样式相关 变换相关)压入到样式栈中
    ctx.restore()
        将样式栈中栈顶的元素弹到样式容器中
        图像最终渲染依赖于样式容器
        
    ctx.translate(x,y):将原点按当前坐标轴位移x，y个单位
    ctx.rotate(弧度):将坐标轴按顺时针方向进行旋转
    ctx.scale(因子):
        放大：放大画布，画布中的一个css像素所占据的物理面积变大，画布中包含的css像素的个数变少
                画布中图像所包含的css像素的个数不变
        缩小：缩小画布，画布中的一个css像素所占据的物理面积变小，画布中包含的css像素的个数变多
                画布中图像所包含的css像素的个数不变

最后编辑于：2019.12.22 11:31:05