canvas笔记

canvas 定义图形，描绘图形

<canvas id="mycanvas" width="200px" height="100px"></canvas>
canvas标签有两个属性width, height, 是描绘图形的容器

js来绘制图像
var mycanvas = document.getElementById('mycanvas');
var ctx = mycanvas.getContext('2d');  创建h5内置的getContext('2d')对象，可以描绘路径，矩形，圆形，文本

方法

路径
     新路经 ctx.beginPath(); 图形绘制命令指向当前路径
     关闭路径： ctx.closePath(); 非必须，关闭路径后，图形绘制命令又重新指向上下文
    填充 ctx.fill()  填充内容区域生成实心图形，会自动闭合路径，不用写ctx.closePath();
    描边 ctx.stroke() 通过线条生成图形轮廓，不会自动闭合路径

线
      开始位置 ctx.moveTo(x, y);
     结束位置 ctx.lineTo(x, y);

矩形
    ctx.fillRect(x,y,width,height); 绘制一个填充的矩形
    ctx.strokeRect(x, y , widht, height); 绘制一个矩形的边框
    ctx.clearRect(x, y, width, height); 清空指定区域的矩形，让清除部分透明

圆形
    ctx.arc(x, y, r, startAngle, stopAngle)  圆是2*Math.PI

文本
    ctx.font 定义字体样式
    ctx.fillText(text, x, y)  在canvas上描绘实心的文字
    ctx.strokText(text, x, y) 在canvas上描绘空心的文字

渐变
    var grd = ctx.createLinearGradient(x,y,x1,y1) 线条渐变
    var grd  ctx.createRadialGendient(x,y,r,x1,y1,r1) 径向渐变

    grd.addColorStop(0/1, color) 指定颜色停止，
                                 如果第一个参数是0，第二个参数开始颜色，
                                 如果第一个参数是1，第二个参数结束颜色，
                                 
颜色和样式
    ctx.fillStyle = grd; 填充的颜色，可以是css颜色、渐变或者图案
    ctx.strokeStyle = "red"  图形轮廓的颜色
    
    ctx.lineWidth(); 绘制线的粗细
    ctx.textAlign = start, end, left, right, center
    ctx.textBaseline = top, bottom, middle, alphabetic, ideographic
    
状态
     ctx.save() 状态保存
     ctx.restore() 状态恢复，每调用一次restore(), 上一次保存在栈中的状态就会恢复

变形
     ctx.translate(x, y) 移动，x为左右偏移量，y为上下偏移量
     ctx.rotate(angle)  旋转，angle为顺时针旋转的角度
     ctx.scale(x, y)  缩放，默认值为1.0，小于1.0是缩小，大于1.0是放大