Canvas(3)

12 , canvas中的贝塞尔曲线
    (1):二阶贝塞尔曲线
        ctx.quadraticCurveTo(cpx,cpy,x,y);
        <!--
            cpx	贝塞尔控制点的 x 坐标
            cpy	贝塞尔控制点的 y 坐标
            x	结束点的 x 坐标
            y	结束点的 y 坐标
        -->
    (2):三阶贝塞尔曲线
        ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
        <!--
            cp1x	第一个贝塞尔控制点的 x 坐标
            cp1y	第一个贝塞尔控制点的 y 坐标
            cp2x	第二个贝塞尔控制点的 x 坐标
            cp2y	第二个贝塞尔控制点的 y 坐标
            x	结束点的 x 坐标
            y	结束点的 y 坐标
        -->
<!--
    注意:需要
        ctx.beginPath() ; 
        ctx.moveTo(20,20) ; 
-->
        
13 , canvas中的image
    (1):创建Image对象
        let img = new Image() ; 
        img.src = '路径' ; 
    (2):图片加载完成之后显示在canvas上
        img.onload = function(){
            ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
            <!--
                img:img对象
                sx:开始剪切的x轴对象(可选)
                sy:开始剪切的y轴对象(可选)
                swidth:剪切的宽度(可选)
                sheight:剪切的高度(可选)
                x:在画布中放置图片的x轴坐标
                y:在画布中放置图片的y轴坐标
                width:要使用的图片的宽度(可选)
                height:要使用的图片的高度(可选)
            -->
        }
        
14 ,  canvas中的像素操作
    (1):创建新的、空白的 ImageData 对象
        let imgData = ctx.createImageData(w,h) ; 
        <!--
            w:width
            h:height
        -->
    (2):操作每个像素点
        imgData.data
        <!--
            返回值是每个像素点的rgba(0,1,2,3)
        -->
    (3):复制画布上指定矩形的像素数据
        let imgData = ctx.getImageData(x,y,w,h)
    
    (4):把图像数据（从指定的 ImageData 对象）放回画布上
        ctx.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
        <!--
            x:x轴坐标
            y:y轴坐标
            dirtyX	可选。水平值（x），以像素计，在画布上放置图像的位置。
            dirtyY	可选。水平值（y），以像素计，在画布上放置图像的位置。
            dirtyWidth	可选。在画布上绘制图像所使用的宽度。
            dirtyHeight	可选。在画布上绘制图像所使用的高度
        -->