canvas常用api

1.canvas宽高设置（默认300*150）

　在canvas标签中给出长宽（不带单位）：

<canvas width="600" height="600"></canvas>

　或者在js中设置长宽（不带单位）：

canvas.width = 600; 
canvas.height = 600;

　注意：canvas是行内块元素，用CSS设置的width和height像素值是canvas在页面渲染出来的宽高，而用js设置或者在标签中直接给出的则是canvas的分辨率，二者有本质的区别。
　　　　canvas元素的使用与普通的html元素并不相同，它有一个默认尺寸300*150，在css中设置宽高只能改变canvas的显示宽高，而并没有改变画布绘制时的尺寸，所以要为canvas设置绘制的尺寸，必须写在元素标签上或用JS设置。

　Q1: 给canvas标签设置样式 width :100%, height :100%会怎么样呢？

　　　canvas标签有自己的 height 和 width 属性，当给canvas标签设置 height=100 时，它渲染出来的高度就是100px，给它的父元素设置50px的高度，canvas设置css高度100%，则canvas 整体缩放到 50px高（原理类似于img）。
　　

2. 浏览器不兼容canvas标签时才会显示出标签中的内容

　　<canvas width="600" height="600"> 您的浏览器不支持canvas标签 </canvas>

3.简单举例

    var canvas = document.getElementById("canvas"); // 获取canvas标签
    var context = canvas.getContext("2d"); // 获取2d上下文环境

    context.beginPath();//可以开始绘制

    context.moveTo(100, 100); //画笔移动到(100,100);
    context.lineTo(150, 200); //创建一条从(100,100)到(150,200)的路径
    context.fillStyle = "#ccc"; //填充颜色为#ccc
    context.strokeStyle = "#fff"; //进行描边
    context.lineWidth = 5;
    context.fill();//进行填充
    context.stroke();//进行描边

    context.closePath();//关闭当前路径 （基于状态）

    //关于closePath():当当前路径不是封闭路径时，使用closePath会自动将当前路径的首尾连接起来

    context.fillRect(x, y, w, h);
    context.clearRect(50, 30, 110, 35); //清除画布上的内容

    //(50,30)为矩形起点，110.35为矩形长宽

   //想绘制多条不封闭路径图形，在每次绘制新路径时使用beginPath即可

4. 绘制弧线
　context.arc( x, y, r, startingAngle, endingAngle, anticlockwise = false );
   参数分别为：圆心坐标，半径，起始角度，结束角度，时钟方向（false为顺时针、true为逆时针）
        三点钟方向为0pi,六点钟方向为0.5pi,九点钟为1.0pi,12点钟为1.5pi
   例如：context.arc( 300, 300, 100, 0, Math.PI*1.5, false );

5. 绘制矩形

　context.fillRect( x, y, w, h );
   context.strokeRect( 50, 30, 110, 35 );
   context.clearRect(50, 30, 110, 35);  //清除画布上的内容

6. 绘制虚线

　context.setLineDash( [ a, b ] ); //a为虚线线段长度,b为虚线线段间隔长度

7. 取得canvas元素相对于浏览器窗口的位置

　element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置

8. 绘制图片

　context.drawImage( image. x, y, width, height );
   context.drawImage( image, sx, sy, swidth, sheight, x, y, width, height );

   image可以是元素或是image对象，但不能是路径
   传递给 drawImage() 方法的图像必须是 Image 对象或 canvas 元素

9. 绘制文字

　context.font = "20px Arial";
    context.fillStyle = "#000";
    context.fillText( "我是文字", 50, 50 );

　文字居中：
    context.textAlign = "center"; //文本的中心被放置在指定的位置
    context.fillText( "我是蚊子", cvs.width/2, cvs.height/2 );