canvas基础4

canvas基础4

一、图案

// 图案是用于填充和描画图形的重复图像。

// 要创建新图案，可以调用 createPattern() 方法并传入两个参数。

let image = new Image();
image.src = star.png;
pattern = context.createPattern(image, "repeat");
// 画一个矩形
context.fillStyle = pattern;
context.fillRect(10, 10, 150, 150);

let image = new Image();
image.src = star.png;
pattern = context.createPattern(image, "repeat-x");
// 画一个矩形
context.fillStyle = pattern;
context.fillRect(10, 10, 150, 150);

let image = new Image();
image.src = star.png;
pattern = context.createPattern(image, "repeat-y");
// 画一个矩形
context.fillStyle = pattern;
context.fillRect(10, 10, 150, 150);

let image = new Image();
image.src = star.png;
pattern = context.createPattern(image, "no-repeat");
// 画一个矩形
context.fillStyle = pattern;
context.fillRect(10, 10, 150, 150);

二、图像数据

// 2d 上下文比较强大的一种能力是可以使用 getImageDate() 方法获取原始图像数据。

let drawing = document.getElementById("drawing");
// 确保完全支持＜canvas＞
if (drawing.getContext) {
  let context = drawing.getContext("2d"),
    image = document.images[0],
    imageData, data,
    i, len, average,
    red, green, blue, alpha;
  
  // 绘制图像
  context.drawImage(image, 0, 0);  
  
  // 获取图像数据
  imageData = context.getImageData(0, 0, image.width, image.height);
  data = imageData.data;
  for (i=0, len=data.length; i < len; i+=4) {
  
    red = data[i];
    green = data[i+1];
    blue = data[i+2];
    alpha = data[i+3];
    
    // 得到rgb的平均值
    average = Math.floor((red + green + blue) / 3);
    
    // 设置颜色，不管透明度
    data[i] = average;
    data[i+1] = average;
    data[i+2] = average;
    
  }
  
  // 将修改后的数据写回 ImageData 并应用到画布上显示出来
  imageData.data = data;        
  context.putImageData(imageData, 0, 0);
}

三、合成

// 2d 上下文中绘制的所有内容都会应用两个属性：globalAlpha 和 globalComposition Operation。

// 绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
// 修改全局透明度
context.globalAlpha = 0.5;
// 绘制蓝色矩形
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);
// 重置
context.globalAlpha = 0;

// globalComposition Operation 属性表示新绘制的形状如何与上下文中已有的形状融合。

// 这个属性是一个字符串，可以取下列值。

// destination-over:新图形绘制在原有图形下面，重叠部分只有原图形透明像素下的部分可见。

// 绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
// 设置合成方式
context.globalCompositeOperation = "destination-over";
// 绘制蓝色矩形
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);

// source-over:默认值，新图形绘制在原有的图形上面。

// source-in:新图形只绘制出与原有图形重叠的部分，画布上其余部分全部透明。

context.globalCompositeOperation = "source-in";

// source-out:新图形只绘制出不与原有图形重叠的部分，画布上其余部分全部透明。

context.globalCompositeOperation = "source-out";

// source-atop:新图形只绘制出与原有图形重叠的部分，原有图形不受影响。

context.globalCompositeOperation = "source-atop";

// destination-in:新图形绘制在原有图形下面，画布上只剩下二者重叠的部分，其余部分完全透明。

context.globalCompositeOperation = "destination-in";

// destination-out:新图形与原有图形重叠部分完全透明，原图形其余部分不受影响。

context.globalCompositeOperation = "destination-out";

// destination-atop: 新图形绘制在原有图形下面，原有图形与新图形不重叠部分完全透明。

context.globalCompositeOperation = "destination-atop";

// lighter:新图形与原有图形重叠部分的像素值相加，使该部分变亮。

context.globalCompositeOperation = "lighter";

// copy: 新图形将擦除并完全取代原有图形。

context.globalCompositeOperation = "copy";

// xor: 新图形与原有图形重叠部分的像素执行 ‘异或’ 计算。

context.globalCompositeOperation = "xor";