Canvas基础入门手册一

1.<canvas id="mycanvas" width="800" height="600"></canvas>
2.获取canvas对象；var canvas=document.getElementById('mycanvas');
3.渲染上下文；var ctx=canvas.getContext('2d');
4.颜色、样式和阴影
    fillStyle:设置填充绘画的颜色、渐变或模式（区域填充）
    strokeStyle:设置笔触的颜色、渐变或模式（描边）
    shadowColor：设置阴影的颜色
    shadowBlur:阴影的模糊级别；
    shadowOffsetX、shadowOffsetY：返回阴影距形状的水平、垂直距离

5.绘制矩形：
    fillRect(x,y,w,h);//绘制一个填充的矩形，使用之前要先使用fillStyle才能起到效果
    strokeRect(x, y, width, height);//绘制一个矩形的边框,使用之前要先使用strokeStyle才能起到效果
    clearRect(x, y, width, height);//清除指定矩形区域，让清除部分完全透明。
    
    例： ctx.fillStyle = "red";
        ctx.fillRect(20 , 20 , 40 , 40);
        ctx.strokeStyle = "blue";
        ctx.strokeRect(40 , 40 , 60 , 60);
        ctx.clearRect(30 , 30 , 50 ,50);

6. 绘制路径：
    首先，你需要创建路径起始点。 beginPath();
    然后你使用画图命令去画出路径。
    之后你把路径封闭。closePath();
    一旦路径生成，你就能通过描边或填充路径区域来渲染图形。stroke()或fill()，stroke用于描边，必须在使用之前用closePath()才能关闭路径；fill用于填充,
    moveTo(x,y);设置路径的起始位置，每次设置新路径的时候必须使用moveTo,在beginPath()后使用

    例： ctx.strokeStyle="red"
        ctx.fillStyle="yellow";
        ctx.beginPath();
        ctx.moveTo(120,120);//起点
        ctx.lineTo(120,50);
        ctx.lineTo(150,50);
        ctx.fill();
        ctx.closePath()
        ctx.stroke();

7.绘制直线lineTo(x, y);初始配合moveTo()使用

8.圆弧 arc(x, y, radius, startAngle, endAngle, anticlockwise);//radius半径  startAngle开始, endAngle结束， anticlockwise方向：true->逆时针，false->顺时针

    例： ctx.moveTo(260,120);
        ctx.arc(220,120,40,0,Math.PI*2,false);
        ctx.moveTo(205,105);
        ctx.arc(200,105,5,0,Math.PI*2,false);
        ctx.moveTo(245,105);
        ctx.arc(240,105,5,0,Math.PI*2,false);
        ctx.moveTo(220,117);
        ctx.arc(220,125,3, Math.PI*3/2 , Math.PI*1/2 ,true);
        ctx.moveTo(220+Math.sin(Math.PI/4)*20,125+Math.sin(Math.PI/4)*20);
        ctx.arc(220,125,20, Math.PI/4 , Math.PI*3/4 ,false);
        ctx.stroke();

    arcTo(x1, y1, x2, y2, radius) //绘制圆弧,根据初始点和两个控制点进行绘制
    
    例： ctx.strokeStyle='brown';
        ctx.moveTo(100,250);
        ctx.arcTo(250, 250, 270, 350, 100);
        ctx.stroke();

9.贝塞尔曲线
    
    二次贝塞尔曲线quadraticCurveTo(cp1x, cp1y, x, y)；cp1x,cp1y为一个控制点，x,y为结束点。初始点是moveTo(x,y)设置；
    例： ctx.moveTo(300,50);
        ctx.quadraticCurveTo(300, 100, 350, 100);
        ctx.quadraticCurveTo(400, 100, 400, 50);
        ctx.quadraticCurveTo(400, 0, 350, 0);
        ctx.quadraticCurveTo(300, 0, 300, 50);
        ctx.stroke();
    
    三次贝塞尔曲线bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)；
    
    例：ctx.moveTo(450,150);
        ctx.bezierCurveTo(500, 300, 600, 0, 650, 150)
        ctx.stroke();
        
10.线型

    lineWidth=value          设置线条宽度。value是数值代表多少个像素
    
    lineCap=type             设置线条末端样式。type : butt，round 和 square;默认是 butt。
    
    lineJoin = type          设定线条与线条间接合处的样式。type : round, bevel 和 miter。默认是 miter。
    
    miterLimit=value         限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。
    
    getLineDash()            返回一个包含当前虚线样式，长度为非负偶数的数组。
    
    setLineDash(segments)    设置当前虚线样式。
    
    lineDashOffset = value   设置虚线样式的起始偏移量。
    
    例： ctx.beginPath();
        ctx.lineCap="butt";
        ctx.lineWidth=10;
        ctx.moveTo(85,50);
        ctx.lineTo(85,260);
        ctx.stroke();
    
11.渐变

    createLinearGradient(x1, y1, x2, y2)  表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
    
    createRadialGradient(x1, y1, r1, x2, y2, r2)  前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
    
    gradient.addColorStop(position, color)   addColorStop 方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）。
    
    例：  var lingrad = ctx.createLinearGradient(0,0,0,150);
        lingrad.addColorStop(0, '#00ABEB');
        lingrad.addColorStop(0.5, '#fff');
        
        var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
        radgrad4.addColorStop(0, '#F4F201');
        radgrad4.addColorStop(0.8, 'red');
        radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
        ctx.fillStyle = radgrad4;
         ctx.fillRect(0,0,150,150);

12.图案样式

    createPattern(image, type)   Image 可以是一个 Image 对象的引用，或者另一个 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。
                                        与 drawImage 有点不同，你需要确认 image 对象已经装载完毕，否则图案可能效果不对的。
    
    例： var img = new Image();
         img.src = "image/baozha.png"
         img.οnlοad=function(){
             console.log(100)
             var ptrn = ctx.createPattern(img,'repeat')
            ctx.fillStyle = ptrn;    
             ctx.fillRect(200,200,450,450);
        }
        
13.阴影

    shadowOffsetX = float 、 shadowOffsetY = float
     
    shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
    
    shadowBlur = float  设定阴影的模糊程度
    
    shadowColor = color 设置阴影颜色
    
    例: ctx.shadowOffsetX =0;
        ctx.shadowColor="#ccc";
        ctx.shadowBlur = 10;
        ctx.fillStyle = "burlywood";
        ctx.fillRect(50,50, 100,100);
        
14.Canvas填充规则 fill()

15.绘制文本

    fillText(text, x, y textMaxWidth) 填充文本
    
    strokeText(text, x, y textMaxWidth) 绘制文本
    
    //text:文本内容    x,y:起始坐标  textMaxWidth:文本区域的最大长度(可不填)
    
    例： ctx.font = "48px serif";
         ctx.fillText("浩然正气",300,300,150)

16.    文本样式

    font = value         设置文本的字体大小和字体  font-size  font-family   （大小在前，字体在后）
    
    textAlign = value    文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。

    textBaseline = value  基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。

    direction = value     文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。
    
    measureText(text)        将返回一个 TextMetrics对象的宽度、所在像素，这些体现文本特性的属性。