canvas画弧、文字、渐变、旋转、图片、worker

前言：

即使行动导致错误，却也带来了学习与成长；不行动则是停滞与萎缩

--------------------------------正文---------------------------------

画弧

    gd.arc(cx,cy,r,s,e,d);
        cx,cy           圆心位置
        r               半径
        s               开始的弧度
        e               结束的弧度
        d               是否逆时针

文字

   gd.font="大小 类型";
   gd.textAlign             水平对齐    center
   gd.textBaseline          基线对齐    middle
   gd.strokeText(str,x,y);
   gd.fillText(str,x,y);

渐变

  线性渐变
   var lg = gd.createLinearGradient(x1,y1,x2,y2);
   lg.addColorStop(0-1,color);
  球形渐变
   var rg = gd.createRadialGradient(cx1,cy1,r1,cx2,cy2,r2);
   rg.addColorStop(0-1,color);

旋转、平移、放大

    rotate\translate\scale
    所有操作的原点都是画布的左上角
    操作的都是画布

    操作rotate、translate、scale
    画图
    还原
eg:
    保存画布当前状态
    gd.save();
    操作
    画图
    还原回去
    gd.restore();

获取图片数据

    var data = oC.toDataURL('类型');
                image/png       默认
                image/jpeg

图片背景

    oImg.onlaod= function (){
        var cp = gd.createPattern(oImg,'平铺方式');
        //.......
    };

引入外部图片

    gd.drawImage(
        oImg,
        dx, dy
    );
    gd.drawImage(
        oImg,
        dx, dy, dw, dh
    );
    gd.drawImage(
        oImg,
        sx, sy, sw, sh,
        dx, dy, dw, dh
    );

canvas、svg区别

canvas
    位图
        放大会失真
        性能高
    游戏、效果、动画
svg
    矢量图
        放大不会失真
        性能差
    小图标
    不兼容低版本浏览器

WebWorker

    如何开启多线程
    一个线程就是一个js

    主线程
    子线程

    注意:
        不能操作BOM
        不能操作DOM

        计算

    主线程和子线程之间通信
        发送
            worker.postMessage(data);
        接收
            worker.onmessage = function(ev){
                ev.data;
            };

        子线程不能再开子线程。

    不能跨域

WebSQL          Web端的数据库
WebGL           动画
WebWorker       多线程
WebSocket       双向交互
    主动响应客户端
    不只是前端的事，需要后台配合。