canvas 图片平铺，交错平铺，图片合并

demo-start-me: github

rect

api

test all the api

• Stage
• make a layer
• make a rect width 600 h 600
• test all api
• fillPatternImage http://jiantuku.com/#/albums/20775?scope=public 控制小点
• fillPatternScale {x:y}
• fillPatternOffset 移动
• 拖拽移动背景

image.png

圖片的一半背景填充（交错平铺,砖块平铺）

such as

砖块平铺

• 根据原始的图片 生成 左11，（右半下1 ---1---上半1）
• canvas的图片合并（这个new图片的大小是原始图片的 w=>2w,h=>2h）
• demo create megerCanvas
• how to canvas a image
• ctx.drawImage(beauty, 0, 0);

• what is the params for drawImage;

  
  
  image.png
• we gona use
  context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
  裁剪图片，这个需要疯狂的使用
• we gona use draw一个只有一半的图片
  
  image.png
  
  demo is here
  MegerCanvas
• 生成新的图片

// Converts canvas to an image
function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}

• canvas 大小設置為 原始图片的大小的2倍
• canvas 縮小/2

• 根据这个新的图片平铺

  
  
  image.png