..

1、 绘制圆弧：  ctx.arc(x0,y0,r,起始弧度，结束弧度，是否逆时针)
      1° = 2π /360 弧度
      2、绘制文本：   ctx.strokeText('字符串',坐标x，y)
                      ctx.fillText('',x,y)
               文本属性：  ctx.font=''----css的font样式用法一样
                           ctx.textAlign: right  left  center
                           ctx.textBaseLine: top  middle bottom start end
     3、 绘制图片：
           3.1 实例化图片对象
           3.2 为图片添加加载事件-----加载完成后，绘制图片
           3.3 为图片对象添加src属性
    
           绘制图片的方法：  ctx.drawImage(img,x,y)
                            ctx.drawImage(img,x,y,w,h)
                            ctx.drawImage(img,
                                          imageX,imageY,
                                          imageW,imageH,
                                          x,y,
                                          w,h）
     4、 坐标的转换
           ctx.translate(x,y)
           ctx.rotate(弧度)
           ctx.scale(w,h)

 1. 流式布局：使用百分比布局，非固定的像素，内容向两侧填充，理解成流动的布局，称为流式布局
  2. 视觉窗口： viewport 移动端特有的。 这是一个虚拟的区域，承载网页的
               分三类： 设备视口，页面视口，理想视口：一种理想的状态，设备视口=页面视口
         承载关系： 浏览器----->viewport -----> 网页

 1. 适配要求：
           1） 网页的宽度必须和浏览器的宽度保持一致  width='device-width'
           2） 默认的显示缩放比例和PC端保持一致（缩放比例1.0）  initial-scale:1.0
           3） 不允许用户进行缩放    user-scalable:0
           ----达到以上三点，达到了适配，是国际上通用的适配方案，标准的移动端适配方案
       2. 适配设置：
           视口： 在head标签下，跟着title标签后  <meta name='viewport' content='适配要求'>
           viewport的功能：
           1）width: 设置页面宽度   device-width:当前设备的宽度
           2) height: 设置页面高度
           3）initial-scale: 设置默认的缩放比例   1.0  【0.0~10.0】
           4） maximum-scale: 设置最大缩放比例
           5） minimum-scale: 设置最小缩放比例
           6） user-scalable: 用户是否允许缩放   yes  no  1 0
    
     3. 标准的适配：<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
  快捷键： meta:vp  + tab键

     屏幕像素： 也叫物理像素，像素点，  设备显示屏的最小可视颗粒的大小
     非主流适配方案特征：根据设备分辨率的不同，设置缩放比例不同