返回博客

Canvas 的 globalAlpha 属性

Canvas 的 globalAlpha 属性用于设置绘图的全局透明度。本文介绍了 globalAlpha 属性的作用,并提供了一个使用 globalAlpha 生成透明图片的代码示例,该示例解决了 IE 浏览器兼容性问题。

Mt.r
|

看到这么一处代码,很有意思,裂图用透明图片进行替换。

然后了解了一下 globalAlpha 属性的作用,这儿 mark 一下,其实就是 canvas 的透明度

globalAlpha - MDN

var canvas = document.createElement('canvas');

// 2020-12-16 10:39:55 IE 兼容 IE 不支持该方法
if (canvas.getContext) {
  canvas.getContext('2d').globalAlpha = 0.0;
}
var images = {};

var getTransparent = function (src, w, h) {
  if (images[src]) return images[src];
  canvas.width = w;
  canvas.height = h;
  var data = canvas.toDataURL('image/png');
  images[src] = data;
  return data;
};