HTML5之图形变换

- Transformations

scale(0.5,0.5) 缩放
rotate(0.175) 旋转
translate(100,50) 位移

- 代码结构

  context.scale(x, y)
  context.rotate(angle )
  context.translate(x, y)

  context.rotate(0.175);
  context.scale(0.75,0.75 );
  context.fillRect(0,0,200,150);

  context.translate(100,50);
  context.rotate(0.175 );
  context.fillRect(0,0,200,150);

- 旋转图片

  image.onload =  function() {
    var rotate = 15;
    var scaleStart =  0.0;
    var scaleEnd =  4.0;
    var scaleInc =  (scaleEnd ‐scaleStart)/(360/rotate);
    var s  = scaleStart;

    for(var i=0; i<=360; i+=rotate) {
       s += scaleInc;
       context.translate(540,260);
       context.scale(s,s);
       context.rotate(i*‐1*Math.PI/180);
       context.drawImage( image,0,0,120,80);
       context.setTransform(1,0,0,1,0,0);
    }
   };

- context.setTransform(m11,m12,m21,m22,dx,dy)

m11,m12,m21,m22四个参数用来修改使用这个方法之后，绘制图形的计算方法，以达到变形目的
dx表示将坐标原点在x轴上向右移动x个单位
dy表示将坐标原点在y周上向下移动y个单位

- 实例

<body>
    <canvas width="1000" height="800" style="border: 1px dotted black;"/>
    <script type="text/javascript">
        var canvas = document.querySelector('canvas');
        var context = canvas.getContext('2d');

        var deg2rad = function (deg) {
            //alert(deg * (Math.PI / 180.0));
            return deg * (Math.PI / 180.0);
        }; 
        var rect = function (col) {
            context.save();
            context.fillStyle = col;
            context.strokeStyle = 'black';
            context.globalAlpha = 0.5;
            context.fillRect(0, 0, 160, 120);
            context.strokeRect(0, 0, 160, 120);
            context.restore();
        };

        // inital coordinate system 正常
        context.setTransform(1, 0, 0, 1, 160, 100);
        rect('silver');

        // scale    缩放
        context.setTransform(1, 0, 0, 1, 520, 100);
        context.scale(0.5, 0.5);
        rect('yellow');

        // rotate    旋转
        context.setTransform(1, 0, 0, 1, 160, 360);
        context.rotate(deg2rad(20));
        rect('red');

        // translate  位移
        context.setTransform(1, 0, 0, 1, 520, 360);
        context.translate(80, 40);
        rect('lime');

        // 输出文字
        context.font = '16px Arial';

        context.setTransform(1, 0, 0, 1, 230, 250);
        context.fillText('正常', 0, 0);

        context.setTransform(1, 0, 0, 1, 590, 250);
        context.fillText('缩放', 0, 0);

        context.setTransform(1, 0, 0, 1, 230, 550);
        context.fillText('旋转', 0, 0);

        context.setTransform(1, 0, 0, 1, 600, 550);
        context.fillText('位移', 0, 0);

    </script>
</body>

--------- 针对属性的操作

- document.getElementsByClassName()

  <li id=de class=q>Berlin</li>
  <li id=at class=q>Vienna</li>

  questions.item(1).innerHTML => Vienna
  questions.namedItem('de').innerHTML => Berlin

使用空格连接多个关键字

  var mmm = document.getElementsByClassName('red apple');

- Data-* 标记可以用来自定义数据

 <li id=at class=q
    data-pop=1705080
    data-geo-lat=48.20833
    data-geo-lng=16.373064
    data-country='Austria'>Vienna</li>

var el = q.namedItem('at');
var pop = el.dataset.pop;    // 1705080
var lat =  el.dataset.geoLat;   // 48.208
var lng =  el.dataset.geoLng;   // 16.373
var ctr =  el.dataset.country;  // Austria

el.dataset.pop =  1717034;    // 通过dataset取值

- Hidden 属性将元素隐藏起来

 var showRandomNItems = function(q,n) {
    var show = [];
    for (var i=0;  i<q.length; i++) {
        q.item(i).hidden  = true;
        show.push(i);
    }
    show.sort(function()  {return  0.5  – Math.random()});

    for(var i=0; i<n; i++) {
        q.item(show[i]).hidden = false;   // 设置为false为显示,true为隐藏
    }
  };

- classList接口

DOMTokenList
item(),contains(),add(),remove(),toggle()

    <li class="red apple">

    li.classList.length     => 2
    li.classList.item(0)     => red        // 根据索引值取值
    li.classList.item(1)     => apple

    li.classList.contains('red')       => true    // 判断是否包含指定字符串
    li.classList.contains('apple')       => true
    li.classList.contains('organic')   => false

    li.classlist.add('organic')        // 添加元素
    li.classList.item(2)  => organic    

    banana.classList.remove('organic');        // 移除元素

--- 小实例一个面包的一天

  // 早上的时候
  bread.classlist.add('fresh')

  // 中午的时候
  bread.classList.toggle('fresh')
  bread.classList.contains('fresh') => false

  //  第二天的早上
  bread.classList.toggle('fresh')
  bread.classList.contains('fresh') => true