笔记十一（canvas颜色应用基础）

最新推荐文章于 2024-03-02 13:59:14 发布

原创最新推荐文章于 2024-03-02 13:59:14 发布 · 580 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

前端动画基础学习笔记专栏收录该内容

22 篇文章

订阅专栏

本文深入探讨了使用HTML5和JavaScript进行色彩合成与提取的方法，包括三原色的组合公式和从颜色中提取独立三原色的技术。通过封装工具函数，实现颜色到RGB格式的转换及透明度的指定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、色彩合成
假设想通过红绿蓝三原色的三个数值合成一个完整有效的颜色值，可以借助以下公式：

var color = 0xFF << 16 | 0X55 << 8 | 0X33; //采用十六进制
var color = 255 <<16 | 88 << 8 | 10; //采用十进制亦可

2、提取三原色
假设想从一种颜色中提取每个独立的三原色的值：

red = color >> 16 & 0xFF;
green = color >> 8 & 0xFF;
blue = color & 0xFF;

这里封装两个与颜色相关的工具函数：
1. utils.colorToRGB接受一个表示颜色值的数字或十六进制字符串作为参数，然后提出独立的三原色，并将其拼接为一个CSS风格的函数作为返回值。此外还接受一个可选的第二个参数用于指定透明度值，该值必须为0~1内的小数。

utils.colorToRGB = function(color , alpha){
    if(typeof color === 'string' && color[0] === '#'){
        color = window.parseInt(color.slice(1),16);
    }
    alpha = (alpha === undefined) ? 1:alpha;
    var  r = color >> 16 & 0xff,
        g = color >> 8 & 0xff,
        b = color & 0xff,
        a = (alpha < 0) ? 0:((alpha > 1)? 1:alpha);
    if(a === 1){
        return "rgb(" + r + "," + g + "," + b + ")";
    }else{
        return "rgb("+ r + "," + "g" + "," + b + "," + a + ")";
    }
};

utils.parseColor函数可以将一个颜色的数值转换为一个十六进制格式的字符串，也可以将一个十六进制格式的字符串还原为一个数值。调用该函数并传入一个十六进制数(0xff0000)，将返回字符串值(#ff0000)；传入一个CSS风格的十六进制字符串将原值返回。该函数还接受一个可选参数toNumber，该值为true时，函数返回一个数值型的颜色值。

utils.parseColor = function (color , toNumber){
    if(toNumber === true){
        if(typeof color === 'number'){
            return (color | 0);
        }
        if(typeof color === 'string' && color[0] === '#'){
            color = color.slice(1);
        }
        return window.parseInt(color ,16);
    }else{
        if(typeof color === 'number'){
            color = '#' + ('000000' + (color | 0).toString(16)).substr(-6);
        }
        return color;
    }
}

参见《HTML5+Javascript动画基础》。