setRed(imageData, x, y, redValue) 设置红色值

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

设置指定图像数据对象 imageData 在指定 (x, y) 位置像素的 red 红色数值（范围：0-255）为 redValue。

在 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)。前三个值越低越接近黑色，越高越接近白色。

示例代码


// 设置指定像素红色值为 0。
createCanvas('canvas1');
setFillColor('red');
rect(0, 0, 100, 200);
var imageData = getImageData(0, 0, 100, 200);
console.log(getRed(imageData, 50, 50));
setRed(imageData, 50, 50, 0);
putImageData(imageData, 0, 0);
console.log(getRed(imageData, 50, 50));

示例代码：颜色交换 交换像素颜色值，green -> red，blue -> green，red -> blue。


// 交换像素颜色值，green -> red，blue -> green，red -> blue。
createCanvas('canvas1');
drawImageURL("https://studio.xiaowai.co/blockly/media/skins/bee/static_avatar.png");
button("id", "Swap Colors");
setPosition('id', 200, 0);
onEvent("id", "click", function() {
  var imageData = getImageData(0, 0, 175, 200);
  putImageData(swapRedGreenBlue(imageData), 0, 225);
});
function swapRedGreenBlue(thisImageData){
    for(var y=0; y < thisImageData.height; y++) {
        for(var x=0; x < thisImageData.width; x++) {
            var newRed = getGreen(thisImageData, x, y);
            var newGreen = getBlue(thisImageData, x, y);
            var newBlue = getRed(thisImageData, x, y);
            setRed(thisImageData, x, y, newRed);
            setGreen(thisImageData, x, y, newGreen);
            setBlue(thisImageData, x, y, newBlue);            
        }
    }
  return thisImageData;
}

语法规则


setRed(imageData, x, y, redValue);

参数说明

名称 类型 必需 参数描述
imageData object Yes 从画布获取的图像数据对象（使用 getImageData() 方法获取）。
x number Yes 指定图像左上方的横轴坐标位置（单位：像素）。
y number Yes 指定图像左上方的纵轴坐标位置（单位：像素）。
redValue number Yes 指定像素 red 红色数值（范围 0 - 255）。

返回值

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

提示说明

  • 使用 getImageData() 方法获取当前激活画布上的图像数据。
  • 相关方法：getRed() 。
  • 使用 putImageData() 方法将处理后的图像数据放回到画布里并在画布里重新显示。

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

返回文档首页