H5中的Canvas画布

canvas用法：

1. H5中新增的元素，只是创造了一个固定大小的画布，需使用js脚本来进行绘制
2. 画布默认宽高：默认宽高为300px*150px，可通过
   <canvas class="cav" width="400px" height="450px"></canvas>
   调整大小，如在样式表中设置画布的宽高，会失帧。
3. canvas 元素本身是没有绘图能力的，绘制图需要在 JavaScript 内部完成：

   var canvas = document.getElementsByTagName('canvas')[0]//获取画布
   var ctx = canvas.getContext('2d'); //获取画笔
  

画三角形

ctx.lineWidth 线条的宽度
moveTo(x,y) 线条的起点
lineTo(x,y) 线条的终点
ctx.closePath();自动闭合
ctx.stroke();描边渲染
ctx.fill()；填充渲染

        ctx.beginPath();
        ctx.moveTo(50,50);
        ctx.lineTo(100,100); 
        ctx.lineTo(100,50);
        ctx.closePath();
        ctx.stroke();

画一个矩形

1. ctx.strokeRect(100,100,100,100); 描边矩形
2. ctx.fillRect(100,100,100,100);填充的矩形

会上下移动反弹的矩形

 var canvas = document.getElementsByTagName('canvas')[0]
        // 获取画笔
        var ctx = canvas.getContext('2d');

        // 矩形  每间隔一段时间 不停的向下掉落
        ctx.fillStyle = 'pink';
        ctx.strokeRect(100,100,100,100);
        // 不停的绘制不同坐标的矩形  y不断增加 
        var y = 100
        var h = 5;
        setInterval(function(){
            // 清除整个画布  0,0,600,500
            // lineWidth
            ctx.clearRect(99,y-1,102,102);
            if(y + 100 >= 500){
                h = -5;
            }
            if(y <= 0){
                h = 5;
            }
            y += h;
            ctx.strokeRect(100,y,100,100);
        },60)

        // 当画布底部 反弹 到了画布顶部 再反弹

画圆

arc(x,y,r,起始弧度,结束的弧度,方向(0顺时针,1逆时针))

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();

数学不好的可以看这个图，我觉得挺方便的~

文本

• strokeText(‘1111’,x,y);

• fillText()
• font 必须同时设置字体大小和字体类型 不然会失效 ‘20px 微软雅黑’;
• textBaseline
  1. hanging 悬挂对齐
  2. middle 居中
  3. bottom 以坐标线为底部对齐
• textAlign 文本的对齐方式
  1. left 默认的对齐方式 以坐标点为文本的最左边的边界
  2. right 以坐标点为文本的最右边的边界
  3. center 以坐标点为文本的中间值进行对齐
     4.