setRGB(imageData, x, y, red, green, blue, alpha) 设置RGBA

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

设置指定图像数据对象 imageData 在指定 (x, y) 位置像素的 red 红色、green 绿色、blue 蓝色、以及 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);
console.log(getRed(imageData, 50, 50) + " "+ getGreen(imageData, 50, 50) + " "+ getBlue(imageData, 50, 50));
setRGB(imageData, 50, 50, randomNumber(0,255), randomNumber(0,255), randomNumber(0,255));
putImageData(imageData, 0, 0);
console.log(getRed(imageData, 50, 50) + " "+ getGreen(imageData, 50, 50) + " "+ getBlue(imageData, 50, 50));

示例代码:灰度图片 对图片进行灰度处理。


// 对图片进行灰度处理。
createCanvas('canvas1');
drawImageURL("https://studio.xiaowai.co/blockly/media/skins/bee/static_avatar.png");
button("id", "Greyscale");
setPosition('id', 200, 0);
onEvent("id", "click", function() {
  var imageData = getImageData(0, 0, 175, 200);
  putImageData(makeBlackAndWhite(imageData), 0, 225);
});

function makeBlackAndWhite(thisImageData){
    for(var y=0; y < thisImageData.height; y++) {
      for(var x=0; x < thisImageData.width; x++) {
        if (getRed(thisImageData, x, y)!=0 && getGreen(thisImageData, x, y)!=0 && getBlue(thisImageData, x, y)!=0) {
          var newRGB=(getRed(thisImageData, x, y)+getGreen(thisImageData, x, y)+getBlue(thisImageData, x, y) ) / 3;
          setRGB(thisImageData, x, y, newRGB, newRGB, newRGB);
         }
      }
    }
  return thisImageData;
}

语法规则


setRGB(imageData, x, y, red, green, blue, alpha);

参数说明

名称 类型 必需 参数描述
imageData object Yes 从画布获取的图像数据对象(使用 getImageData() 方法获取)。
x number Yes 指定图像左上方的横轴坐标位置(单位:像素)。
y number Yes 指定图像左上方的纵轴坐标位置(单位:像素)。
red number Yes 指定像素 red 红色数值(范围 0 - 255)。
green number Yes 指定像素 green 绿色数值(范围 0 - 255)。
blue number Yes 指定像素 blue 蓝色数值(范围 0 - 255)。
alpha number No 可选。指定像素 alpha 透明度数值(范围 0 - 255)。默认为 255(完全不透明)。

返回值

没有返回值。仅对传入的 imageData 数据对象进行修改。setRGB() 并不会将修改后的图像数据更新到屏幕画布。

提示说明

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

返回文档首页