getAlpha(imageData, x, y) 获取透明度

功能分类: Canvas Applab JavaScript 少儿编程

获取指定图像数据对象 imageData 在指定 (x, y) 位置像素的 alpha 透明度数值(范围:0-255)。

在 APP 应用里使用 canvas 画布,并在画布里绘制图片或图形,这样做有一个好处就是,通过这种方式,你可以在像素级别上获取图像数据并进行相应处理,而这已经足够你创建包含一些常见的图片处理功能的应用。

像素颜色是如何工作的: 在屏幕上我们看到的每个像素的颜色由四个值组成。这四个值分别为 Red 红色值、Green 绿色值、Blue 蓝色值以及 alpha 透明度值,这四个值共同决定了屏幕上显示的色彩及明暗度。这四个值中的前三个代表三个不同颜色的值,每个范围都是从最小的 0 到最大的 255 总共 256 个值。alpha 透明度值则比较特殊,通过它来确定像素与屏幕上同一点上的其他像素相比的不透明程度。通常 alpha 值最小为 0 - 表示像素完全透明,最大为 255 - 表示像素完全不透明。这四个值通常按 Red 红色、Green 绿色、Blue 蓝色的顺序排列,前三个简称 RGB;加上最后一个 Alpha 透明度,合起来简称为 RGBA。完全红色(只有红色)的像素颜色为 (255, 0, 0, 255),完全绿色(只有绿色)的像素颜色为 (0, 255, 0, 255),完全蓝色(只有蓝色)的像素颜色为 (0, 0, 255, 255)。完全黑色则是 (0, 0, 0, 255),完全白色则是 (255, 255, 255, 255)。前三个值越低越接近黑色,越高越接近白色。

示例代码



// 获取并输出指定像素的透明度值
createCanvas('canvas1');
setFillColor('red');
rect(0, 0, 100, 200);
var imageData = getImageData(0, 0, 100, 200);
var alphaValue = getAlpha(imageData, 50, 50);
console.log(alphaValue);


// 获取并输出指定图像上像素的透明度值
createCanvas('canvas1');
drawImageURL("https://xiaowai.co/images/logo.png");
var imageData = getImageData(0, 0, 100, 100);
console.log(getAlpha(imageData, 1, 1));
console.log(getAlpha(imageData, 10, 10));

示例代码:怎样更透明? 设置指定像素透明度为 0 。


// 设置指定像素透明度为 0 。
createCanvas('canvas1');
setFillColor('red');
rect(0, 0, 100, 200);
var imageData = getImageData(0, 0, 100, 200);
console.log(getAlpha(imageData, 50, 50));
setAlpha(imageData, 50, 50, 0);
putImageData(imageData, 0, 0);
console.log(getAlpha(imageData, 50, 50));

示例代码:画布透明度 重置画布所有像素透明度。


// 重置画布所有像素透明度。
createCanvas('canvas1');
drawImageURL("https://studio.xiaowai.co/blockly/media/skins/bee/static_avatar.png");
button("id", "Transparent");
setPosition('id', 200, 0);
onEvent("id", "click", function() {
  var imageData = getImageData(0, 0, 175, 200);
  putImageData(halveAlpha(imageData), 0, 225);
});

function halveAlpha(thisImageData){
    for(var y=0; y < thisImageData.height; y++) {
        for(var x=0; x < thisImageData.width; x++) {
            var newAlpha = (getAlpha(thisImageData, x, y) / 2);
            setAlpha(thisImageData, x, y, newAlpha);
        }
    }
  return thisImageData;
}

语法规则


getAlpha(imageData, x, y);

参数说明

名称 类型 必需 参数描述
imageData object Yes 从画布获取的图像数据对象(使用 getImageData() 方法获取)。
x number Yes 指定图像左上方的横轴坐标位置(单位:像素)。
y number Yes 指定图像左上方的纵轴坐标位置(单位:像素)。

返回值

数值。返回一个指定图像数据 (x, y) 位置上像素的 alpha 透明度数值(范围:0 - 255)。

提示说明

  • 在使用图像颜色相关的方法之前,需要确保屏幕上 canvas 画布以及里面的相关图像已被创建。你可以在 Applab 里的 设计 模式里创建画布,或在代码里使用 createCanvas() 方法创建画布。使用 getImageData() 方法来获取当前激活画布上的图像信息。
  • 使用这些相关方法设置颜色:setAlpha() 以及 setRGB()
  • 使用 putImageData() 方法将处理后的图像数据放回到画布里并在画布里重新显示。

查看更多少儿编程教程、JavaScript 介绍

返回文档首页