canvas学习笔记

1. 在html文件创建canvas标签并设置宽高、背景色
   
2. 在javascripte标签中定义context
   var canvas = document.getElementById(“canvas”);
   var context = canvas.getContext(“2d”);
3. 绘制直线的命令
   context.moveTo(100,100); //线条起点
   context.lineTo(200,200); //线条连接点
   context.lineWidth=5;//线条宽度
   context.strokeStyle=”#058”; //线条颜色
   context.stroke(); //绘制线条命令
4. 绘制间断点直线（用moveTo重新绘制一个线段）
   context.moveTo(100,100); //线条起点
   context.lineTo(200,200); //线条连接点
   context.moveTo(300,300); //另一条线条起点
   context.lineTo(500,500); //线条连接点
5. 用beginPath( )开始一个新的路径用新的状态绘制
   context.beginPath();
   context.moveTo(100,100);
   context.lineTo(200,200);
   context.lineWidth=”8”;
   context.strokeStyle=”#f30”;
   context.stroke();
   context.beginPath(); //开始新的路径,前后两个路径设置的颜色和宽度都互不影响
   context.moveTo(300,300);
   context.lineTo(400,400);
   context.lineWidth=”5”;
   context.strokeStyle=”#ddd”;
   context.stroke();
6. 绘制闭合的图形用closePath( )将路径闭合（通常和beginPath( ) 组合使用）
   context.beginPath();
   context.moveTo(100,100);
   context.lineTo(200,200);
   context.lineTo(300,100);
   context.closePath( ); //自动将最后一个点和第一个点连接
   context.stroke( );
7. 对绘制闭合图形填充颜色用context.fillStyle 和context.fill( )命令（注意先填充再绘制，即context.fill( ) 在context.stroke( )之前）
   context.beginPath();
   context.moveTo(100,100);
   context.lineTo(200,200);
   context.lineTo(300,100);
   context.closePath( );
   context.fillStyle = “red”; //填充颜色
   context.fill(); //填充
   context.strokeStyle = “blue”; //线条颜色
   context.stroke( ); // 绘制
8. 线条属性lineCap( )设置线条两头样式
   lineCap = “butt” // 默认值
   lineCap = “round” //半圆
   lineCap = “square” //方形

9. 线条属性lineJoin( )设置线条连接方式
   LineJoin =”bevel”; /斜切，/默认值
   LineJoin =”round”; //圆角连接
   LineJoin =”miter”; //尖角连接 ，常与miterLimit一起使用。MiterLimit默认值为10，内角和外角长度超过miterLimit时lineJoin将以bevel的样式显示

10. 用Context.save() 和context.restore()可实现图形变换不影响都其他变换
    context.save();
    context.fillStyle = “red”;
    context.translate(100,100);
    context.fillRect(0,0,400,400);
    context.restore(); //把context.save()和context.restore()去掉对比对下面绿色矩形起始点的影响;
    context.fillStyle=”green”;
    context.translate(300,300);
    context.fillRect(0,0,400,400);

11. 图形变换translate（x, y），rotate（deg），scale（sx, sy），也可自己变换矩阵transform（a, b, c, d, e, f）六个参数依次为：水平缩放、水平倾斜、垂直倾斜、垂直缩放、水平位移，垂直位移。变换矩阵有堆叠效果，可用setTransform(a, b, c, d, e, f)重置变换矩阵。

12. 绘制曲线函数：
    Context.arc( centerx, centery, radius, startingAngle, endingAngle, articlockwise = false ),
    context.arcTo( x1, y1, x2, y2, radius)
    二次贝赛尔曲线
    Context.quadraticCurveTo( x1, y1, x2, y2) // x1, y1为控制点坐标， x2, y2为结束点坐标
    三次贝赛尔曲线
    Context.bezeirCurveTo( x1, y1, x2, y2, x3, y3) // x1, y1, x2, y2为两个控制点坐标， x3, y3为结束点坐标

13. 书写文字
    Context.font=” bold 30px Arial)”; //设置字体样式
    Context.fillText ( string, x, y, [ maxlen ] ); //设置字体内容以及位置坐标，实心文字
    Context.strokeText ( string, x, y, [ maxlen ] ); //设置字体内容以及位置坐标, 空心文字
    第四个参数[ maxlen ]为可选项，表示文本内容的最长宽度，只写数字，默认单位是px
    Context.textAlign = ” left ” //设置字体的水平对齐方式 left / right / center
    Context.textBaseline = “top” //设置字体的垂直对齐方式 top / middle / bottom;
    Context.measureText( string ).width; //度量文本的宽度，字体不同同一个字符串宽度不一样

14. 阴影效果
    //阴影填充色
    context.shadowColor = “#DDD”;
    //阴影x轴偏移量，可为负数
    context.shadowOffsetX = 20;
    //阴影y轴偏移量，可为负数
    context.shadowOffsetY = 30;
    //阴影模糊大小，值为0时没有模糊效果
    context.shadowBlur = 5;

15. 透明度设置
    context.globalAlpha = 0.7; //设置透明度为0.7
    context.globalCompositeOperation = ” source-over ” ;//重叠部分的透明度设置，默认值source-over表示前面画的被后面画的覆盖，
    context.globalCompositeOperation = “destination-over ” ; //重叠部分的透明度设置，表示后面画的被前面画的覆盖，

16. 绘制图片drawImage ,用drawImage代替image标签可提高移动端性能
    drawImage( image, x, y ) //在canvas上绘制图片
    drawImage( image, x, y, width, height ) //在canvas上缩放并绘制图片