H5画图

使用canvas元素
html新增了一个<canvas/>元素，专门用来绘制图形
    此标记本身不是用来画图，只是提供了一个画布
    需要用js米绘制图像·canvas包含两个属性
height、 width高度和宽度
在canvas绘制图像，需要经过三步
    获取canvas元素对应的dom对象
    调用canvas对象的getContext()方法，这个方法返回一个CanvasRenderingContext2D对象，该对象即可以绘图
    调用CanvasRenderingContext2D对象绘图

绘制几何图形：
矩形
    fillRect（x,y,width,height）填充一个矩形区域
    strokeRect（x,y,width,height）绘制一个矩形边框（宽高对比为2:1）
    lineWidth：定义绘制线条的宽度，默认是1.0
    fillStyle：设置画笔填充路径内部的颜色、渐变、模式
    strokeStyle：设置画笔绘制路径的颜色、渐变、模式
实例：var can = document.getElementById("can");
        var cav = can.getContext("2d");//2d图画，3d兼容性不好
        cav.fillStyle = "#81f"//填充颜色
        cav.strokeRect(30,15,100,50)//绘制矩形边框
        cav.fillRect(30, 15, 100, 50);//图画位置及大小，高是宽的2倍
        cav.lineWidth = 5;//线的粗细
        cav.strokeStyle = "#000"//线的颜色
        
圆弧、圆：
    beginPath（）开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法,它将重置内存中现有的路径。
    moveTo(int x, int y)移动画笔到指定的坐标点(x，y)，该点就是新的子路径的起始点
    lineTo(int x, int y)使用直线连接当前端点和指定的坐标点(x，y)
    closePath（）尝试使用直线连接当前端点和绘制路径的起始端点。如果绘制路径已经关闭(当前图形已被绘出，例如
先调用了stroke()或fill（）等方法)或者当前绘制路经只有一个点，则它什么都不做
实例：
        //画等腰三角形
        var can = document.getElementById("cav");
        var cas = can.getContext("2d");//2d图画，3d兼容性不好
        cas.beginPath();//定义开始绘制图形
        cas.moveTo(100,10);//起始点
        cas.lineTo(150,45);//第二个点
        cas.lineTo(50,45);//第三个点
        cas.closePath();//闭合
        // cas.fill();//填充
        cas.stroke();//边线

    arc(float x,float y,float radius, float startAngle, endAngle,boolean counterclockwise):向Canvas的
当前路径上添加一段弧。绘制以x，y为圆心radius为半径，从startAngle角度开始，到endAngle角度结束的圆弧。
StartAngleendAngle以度作为单位,counterclockwise为方向
        //圆弧(容器大小为宽比高为2:1)
        var cans = document.getElementById("cavs");
        var cass = cans.getContext("2d");//2d图画，3d兼容性不好
        cass.arc(100,100,50,0,Math.PI*2,true);
        cass.stroke();
        cass.fill();
        
文字：
    fillText(string,text,float x,float y,[float maxwidth])；填充字符
    strokeText(string text,float x,float y,[float maxWidth])；绘制字符边框
    font:设置绘制文字使用自体，例如20px 宋体。默认值为10px sans-serif。该属性的用法与css：font属性一致
    []中为文字最大宽度
    字的坐标位置文字的基点位置（左下角）
     //文字
        cass.font="20px bold 微软雅黑";
        cass.fillText("link 朗科",10,20);
        cass.strokeStyle="#f00";
        cass.strokeText("link ",10,100);

使用坐标变化
    translate(dx,dy):平移坐标系统，该方法相当于把原来位于(0,0)位置的坐标系平移到(dx,dy)点
    scale(sx,sy):缩放坐标系统，多有的坐标点x相当于乘以了sx,所有的坐标点y相当于乘以了sy
    rotate (angle) :旋转了坐标系统，angle代表的弧度。所有坐标点x,y相当于旋转了angle弧度之后的坐标系
    save():保存当前文档的绘图状态
    restore()恢复之前绘图状态
    
渐变颜色填充
    调用createLinearGradient(float start,float ystart,float xend,float yend)创建一个线性渐变，返回
CanvasGradient对象
    调用CanvasGradient的addColorStop(float offset,String color)向线性渐变添加颜色
        Offset控制添加颜色的点，该点是0~1之间的数，0代表起点，1代表终点。Color则控制颜色值
    将CanvasGradient对象赋值给fillstyle或strokeStyle属性
    //渐变
        lg=cav.createLinearGradient(0,90,160,90);
        lg.addColorStop(0,"#f00");
        lg.addColorStop(0.5,"#0f0");
        lg.addColorStop(1,"#00f");
        cav.fillStyle=lg;
        cav.fillRect(0,0,160,180)

创建镜像填充——圆形：
    createRadialGradient (float xstart, float ystart, float radiusStart, float xend, float yend, 
float raiusEnd) 返回canvasGradient对象。
        Xstart, ystart控制渐变开始圆圈的圆心
        radiusStart控制开始圆圈的半径
        xEnd,yEnd控制渐变结束圆圈的圆心
        radiusEnd控制结束圆圈的半径
    ·以下和创建线性渐变的步骤相同
实例：
        var canvas=document.getElementById("mc");
        var ctx=canvas.getContext("2d");
        ctx.save();
        ctx.translate(100,100);
        lg=ctx.createRadialGradient(0,0,5,0,0,80);
        lg.addColorStop(0.2,"#f00");
        lg.addColorStop(0.5,"#0f0");
        lg.addColorStop(0.9,"#00f");
        ctx.fillStyle=lg;
        ctx.beginPath();
        ctx.arc(0,0,80,0,Math.PI*2,true);
        ctx.closePath();
        ctx.fill();
        
绘制圆形阴影：
    shadowBlur：设置阴影的模糊度
    shadowColor：设置阴影颜色
    shadowOffsetx：设置阴影x方向的偏移
    shadowOffsety；设置阴影y方向的偏移
    //偏移
         cass.shadowBlur=5.6;
        cass.shadowColor="#001";
        cass.shadowX=20;
        cass.shadowY=30;
        
绘制位图：
     void drawlmage(image,sx,sy,sw,sh,dx,dy,dw,dh)
        该方法将会从image上挖出块来绘制到canvas.上。
        sx,Sy: 控制从源图片上的哪个位置开始挖取，
        sw,sh:从源图片上挖取的宽度、高度;
        dx,dy;挖取的图片在canvas的位置
        dw,dh:绘制出来的图片的宽度和高度
        //绘制位图
        var c = document.getElementById("cm");
        var ctx = c.getContext("2d");
        var image = new Image();
        image.src = "cms/img/starts.png";
        image.onloadafunction()
        ctx.drawImage(image, 100, 100, 100, 50, 0, 8, 200, 108);

旋转：
        //坐标系偏移
        var c = document.getElementById("cm");
        var ctx = C.getContext('2d');
        ctx.scale(0.5, 0.5);//坐标系缩小一半
        ctx. translate(250,125); //移动中心点
        ctx.rotate(20);//旋转坐标系(单位弧度)
        ctx.arc(0,0,50,0,Math.PI, true);
        ctx.stroke();