笔记十一(canvas颜色应用基础)

本文深入探讨了使用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 + ")";
    }
};
  1. 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动画基础》。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值