HTML5的一些新特性2

canvas动画

canvas本身不保存任何图形信息，这也是它高性能的很重要的原因，动画里的两个方法：

1. .translate(); 移动图形位置
2. .rotate(); 旋转，参数为弧度

下面以是一个简单的旋转的例子：每次画新的图形之前都最好清除之前的图形，最好的办法是清楚整个画布上的内容，canvas图形的旋转是以画布的左上角为中心旋转的，所以直接rotate()的话一定让你一脸懵逼，那么，有没有什么解决办法呢？答案是肯定有啊。
先把图形中心移动到左上角，然后旋转，再移回原来的位置，至于代码为什么顺序是反的，因为它的执行顺序就是移动到左上角，然后旋转，再移回原来的位置，(因为矩阵右乘的缘故，原谅我暂时也不太清楚矩阵的问题，还要补啊！)

// 角度转弧度
function d2a(n){
  return n*Math.PI/180;
}
// 弧度转角度
function a2d(n){
  return n*180/Math*PI;
}
let cans = document.getElementById('cans'); // 得到画布
let ctx = cans.getContext('2d'); // 获取上下文
//  ctx.strokeRect(100,100,300,200);
let rotate = 0;
setInterval(function(){
ctx.clearRect(0,0,cans.width,cans.height); // 清空图形
rotate++;
ctx.save(); // 保存旋转，位置等信息（不保存图形本身）
ctx.translate(250,200); // 移动到原来位置
ctx.rotate(d2a(rotate))// 旋转  以画布左上角为中心点旋转 参数为弧度
//ctx.fillStyle = "blue";
//ctx.fillRect(0,0,cans.width,cans.height); // 填充整个画布
ctx.strokeRect(-150,-100,300,200); // 画矩形
//恢复
ctx.restore();
},20)

canvas画图片

方法：drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);
s(source 源)

d(destination 目标)

img: 图片对象

sx: 图片上图行的x坐标

sy: ...y坐标

sw: ..宽

sh: ..高

dx: 画到画布上的位置x坐标

dy: 画到画布上的位置y坐标

dw: ..宽

dh: ..高

下面是游戏人物行走的例子：

let cans = document.getElementById('cans');
let ctx = cans.getContext('2d');
let img = new Image();
img.src = 'spirt.png';
//3 35 32
//35 67 32
//99 32
img.onload = function(){
  let frame = 0;
  let dir = 'd';
  let x=100,y=100,speed=15;
  let keys = {37:'l',38:'u',39:'r',40:'d'};

  document.onkeydown = function(e){
      dir = keys[e.keyCode]||dir;
  };
  setInterval(function(){
    ctx.clearRect(0,0,cans.width,cans.height);
    let rows = {'d':0,'l':1,'r':2,'u':3};
    frame++;
    if(frame==4){
      frame=0;
    }
    ctx.drawImage(
      img,3+32*frame,48*rows[dir],27,48,
      x,y,27*3,48*3
    );
    switch(dir){
      case 'l':
        x -= speed;
        break;
      case 'u':
        y -= speed;
        break;
      case 'r':
        x += speed;
        break;
      case 'd':
       y += speed;
        break;
    }
    if(x>=800){
      x = 100;
    }
    if(y>=600){
      y = 100;
    }
    if(x<=100){
      x = 100;
    }
    if(y<=100){
      y = 100;
    }
  },200)
}

canvas像素级操作

getImageData: 得到图片的信息(像素)

putImageData: 将图片信息填进图片

let cans = document.getElementById('cans');
let ctx = cans.getContext('2d');
let img = new Image();
img.src = '1.jpg';
img.onload = function(){
ctx.drawImage(img,0,0); // 画图片
let imageData = ctx.getImageData(0,0,cans.width,cans.height);
//alert(imageData.data.length)
//data[(r*W+c)*4]  r行 w宽 c 列  一个像素点占四位 -> r g b a
for(let r=0;r<cans.height;r++){
  for(c=0;c<cans.width;c++){
  let avg = (imageData.data[(r*cans.width+c)*4]+imageData.data[(r*cans.width+c)*4+1]+imageData.data[(r*cans.width+c)*4+2])/3;
  imageData.data[(r*cans.width+c)*4]=imageData.data[(r*cans.width+c)*4+1]=imageData.data[(r*cans.width+c)*4+2] = avg;
  }
}
ctx.putImageData(imageData,0,0);
}