功能分类: Canvas Applab JavaScript 少儿编程
设置指定图像数据对象 imageData
在指定 (x, y)
位置像素的 alpha 透明度数值(范围:0-255)为 alphaValue
。
在 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);
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;
}
setAlpha(imageData, x, y, alphaValue);
名称 | 类型 | 必需 | 参数描述 |
---|---|---|---|
imageData | object | Yes | 从画布获取的图像数据对象(使用 getImageData() 方法获取)。. |
x | number | Yes | 指定图像左上方的横轴坐标位置(单位:像素)。 |
y | number | Yes | 指定图像左上方的纵轴坐标位置(单位:像素)。 |
alphaValue | number | Yes | 指定像素 alpha 透明度数值(范围 0 - 255)。 |
没有返回值。仅对传入的 imageData
数据对象进行修改。setAlpha()
并不会将修改后的图像数据更新到屏幕画布。