HTML5语义化标签canvas

1.注意点

    ---canvas图像的渲染有别于html图像的渲染，

        canvas的渲染几块，不会出现代码覆盖后延迟渲染的问题

        写canvas代码一定要具有同步思想

    ---在获取上下文时，一定要先判断

    ---画布高宽的问题

        画布默认高宽300*150

        切记一定要使用html的attribute的形式来定义画布的高宽

        通过css形式定义会缩放画布内的图像

    ---绘制矩形的问题

        a.边框高度的问题，边框宽度是在偏移量上下分别渲染一半，可能会出现小数边框，

        一旦出现小数边框都会向上取整。

        b.canvas的api只支持一种图像的直接渲染：矩形。

       

2.画布api

    oc.getContext("2d"):获取2d(二维)画布

    oc.width

    oc.height

    oc.toDataRUL():拿到画布图片的地址

3.上下文api

    ctx.fillRect(x,y,w,h):填充矩形

    ctx.strokeRect(x,y,w,h):带边框的矩形

    ctx.clearRect(0,0,oc.width,oc.height):清除整个画布(注意原点的位置)

    ctx.fillStyle：填充的颜色

        背景ctx.fillRect的值可以是ctx.createPattern(image,repetition)返回的对象

        线性渐变fillStyle的值可以是ctx.createLinearGradient(x1,y1,x2,y2)返回的对象

            addColorStop(position,color)

        径向渐变fillStyle的值可以是ctx.createRadialGradient(x1,y1,r1,x2,y2,r2)返回的对象

            addColorStop(position,color)

    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):作一个以(x,y)为圆心，r为半径，degS为起始角度，degE为结束角度，dir顺逆时针选择

    ctx.arcTo(x1,y1,x2,y2,r):

        结合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(cpx1,cpy1,cpx2,cpy2,x1,y1):

        结合moveTo(x,y)方法使用，

        起始点(x,y)，控制点1(cpx1,cpy1)，控制点2(cpx2,cpy2)，结束点(x1,y1)

    ctx.beginPath():清除路径容器

    ctx.closePath():闭合路径

    ctx.save():将画布的当前状态压入到样式栈中

    ctx.restore():将样式栈中栈顶的元素弹到样式容器中，图像最终渲染依赖于样式容器

    ctx.translate(a,b):将原点按当前坐标轴位移啊a,b个单位

    ctx.rotate(c):将坐标轴按顺时针方向进行旋转c度

    ctx.scale(a,b):将画布中的单位像素的x方向放大a倍，y方向放大b倍，当a,b小于1则是缩小，a,b均为正值

    ctx.drawImage(img,x,y,w,h):在canvas中引入图片一定要等图片加载完成之后再去操作

    ctx.measureText("文本"):返回一个持有文本渲染宽度的对象

    ctx.fillText()

    ctx.strokeText()

    ctx.font

    ctx.textAlign

    ctx.textBaseLine

    shadowOffsetX = float

    shadowOffsetY = float

    shadowBlur = float

    shadowColor = color(必须项)

    ctx.getImageData(x,y,w,h)

        ImageData对象

            width:选中区域在横向上的像素个数

            height:选中区域在纵向上的像素个数

            data:各个像素的rgba数据组成的数组

    ctx.putImageData(imagedata,x,y)

    ctx.createImageData(w,h):返回的是imgdata对象，默认像素点的信息是rgba(0,0,0,0)

    ctx.globalAlpha:取值为0到1

    ctx.globalCompositeOperation

        source-over(默认值) :源在上面，新的图像层级比较高

        source-in : 只留下源与目标的重蠱部分(源的那一部分)

        source-out : 只留下源超过目标的部分

        source-atop :砍掉源溢出的部分

        destination-over:目标在上面，旧的图像层级比较高

        destination-in:只留下源与目标的重蠱部分(目标的那一部分)

        destination-out:只留下目标超过源的部分

        destination-atop :砍掉目标溢出的部分

    ctx.isPointInPath(x,y):(x,y)这个点是否在路径上