canvas笔记（一）

一，canvas
    1,canvas基本用法
        canvas是h5的一个新标签，画布标签
        语法：
            <canvas width="200" height="200">
            您的浏览器不支持canvas，请升级
            </canvas>


            canvas元素创建一个固定大小的画布，公开了一个或多个图形上下文，（渲染图像的一个对象），图形上下文可以绘制和处理要展示的内容，图像上下文有2种，2D和3D，我们主要学习2D，3D上下文兼容性太差，需要学习vebGL就是3D上下文
            注意：canvas元素宽高只能在元素内部设置，不能使用css设置宽高
            使用方式：
                1，获取元素
                    var canvas = document.getElementById("canvas");
                2,获取上下文
                    var ctx = canvas.getContext('2d');
                    使用ctx的各种方法进行绘制，使用的不是canvas的方法
                    eg:
                        ctx.fillRect();// 长方形
                        ctx.arc();//圆
    2，矩形
        基本语法
         1)绘制一个实心矩形
                ctx.fillStyle='cyan';//填充色
                ctx.fillRect(10,10,50,20);
         2）绘制一个空心矩形
                ctx.strokeStyle = 'yellow';//边框颜色；
                ctx.lineWidth = "4";//笔触宽度
                ctx.strokeRect(70,10,50,20);
         参数含义：
            参数1：矩形的x值，距左边距离
            参数2：矩形的y值，距上边距离
            参数3：矩形的宽度
            参数4：矩形的高度
    3，路径
        路径：路线，路径是没有fill,只有stroke,没有填充，只有描边，但是如果路径封闭，就可以给封闭的空间添加填充色
        eg:
                ctx.beginPath();//开始路径
                ctx.moveTo(50,50);//将绘制起始点移动到某个位置
                ctx.lineTo(300,50); //开始连线，绘制一条50，50到300，50
                ctx.lineTo(250,100);//继续连线，绘制一条300，50到250，100
                ctx.lineTo(100,100); //继续连线
                ctx.closePath(); //关闭路径，闭合路径


                ctx.strokeStyle="purple"; //笔触颜色
                ctx.lineWidth = '8'; //笔触宽度
                ctx.stroke(); //空心渲染
                ctx.fillStyle = 'yellow'; //闭合圆形内部填充色
                ctx.fill(); //实心渲染
        注意：路径结束时必须写fill(),stroke() 才能将路径渲染出来，否则出不来任何内容
    4，圆弧
        ctx.arc(x,y,r,startAngle,endAngle,t/f);
        按照顺时针或逆时针的方向在坐标为（x,y）的位置绘制一个半径为r的圆弧，该圆弧从startAngle角度开始到endAngle角度结束
        eg:
            ctx.arc(200,200,50,0,2,false);
            圆心：（200，200）
            半径：50
            开始角度：0
            结束角度：2
            方向：顺时针
    5，绘制文本
          ctx.fillStyle = 'purple';
          ctx.font = 'bold 20px 微软雅黑 ';
          ctx.fillText('hello word',180,180);

    6,绘制图片

        1)9个参

           ctx.drawImages(image,sx,sy,sw.sh,dx,dy,dw,dh);

                    参数一：要被绘制的图片
                    参数2，3：要绘制图片的切片位置
                    参数4，5：绘制图片切片大小
                    参数6，7：将切片在画布上展示位置

                    参数8，9：切片在画布上展示的大小     

      2）5个参

            ctx.drawImages(image,dx,dy,dw,dh);
                     参数一：要被绘制的图片
                     参数2，3：画布上的坐标
                     参数4，5：画布上的宽高

        3)3个参

           ctx.drawImages(img,dx,dy);
                     参数一：要被绘制的图片
                     参数2，3：将切片在画布上展示位置

                     将整个图片在画布上的dx,dy坐标完全绘制

      

    7,擦除画布内容
        ctx.clearRect(x,y,w,h);
        参数1，2：从哪个位置开始擦除
        参数3，4：擦除多大区域
        常用的：


二。canvas动画原理
    图片绘制在画布上，也就是被画布像素化，一个元素要运动必须擦除重新绘制
    原理：绘制一帧 -> 擦除 -> 重绘 -> 擦除 ->重绘.....
    总结：
        画布上的内容都是像素化的，但是我们可以通过一个js变量一直持有一个对象，更改这个对象的属性，然后重新绘制这个对象，实现运动效果
        我们可以使用面向对象的思维设计canvas

        每一个对象必须有的方法:updata,render

2，动画
        一个画布中，不管有多少个元素在运动，都只能有一个定时器进行画布更新，所有元素运动的速度控制根据每一帧运动的距离控制
        帧频:fps (frame per second) 每秒多少祯
        计算方法：fram / second
        定时器时间写-1:说明将定时器设置为最快帧频，除了使用-1让定时器打到计算机最快处理速度，还可以使用requestAnimationFrame 函数达到计算机的最优处理速度
        Date.parse(new Date()):获取当前时间戳，单位 秒