HTML5 颜色及透明度

颜色及透明度

在Canvas绘图时，可以通过绘制上下文的strokeStyle属性和fillStyle属性来设置图形的描边颜色和填充颜色。默认颜色为不透明的黑色。

strokeStyle属性和fillStyle属性可以被设置为任意有效的CSS颜色字符串，可以使用颜色名称、十六进制RGB颜色、RGB、RGBA、HSL、HSLA颜色中的任意一种。

在使用RGBA或HSLA颜色时，可以通过设置其透明度（alpha）来实现半透明填充或轮廓效果。alpha的取值范围为0.0（完全透明）~ 1.0（完全不透明），默认值为1.0。

如果既想要半透明的颜色，又不想给每种颜色都设置一个透明度，又或者想要给图像或图案添加半透明效果的话，可以通过全局透明度（globalAlpha）属性来实现。globalAlpha属性的值范围也是0.0（完全透明）~ 1.0（完全不透明），默认值为1.0。

浏览器会把globalAlpha属性指定的透明度应用于所有图形和图像，所以，在绘制大量拥有相同透明度的图形时，该属性就相当高效。但要记住，在设置globalAlpha属性之前绘制的图形，将不受该属性的影响，它只会影响之后绘制的图形。如：

context.globalAlpha = 0.4;
context.fillStyle = "#fd0";
context.fillRect(0, 0, 75, 75);
context.fillStyle = "#6c0"
context.fillRect(75, 0, 75, 75);
context.globalAlpha = 0.6;
context.fillStyle = "#09f";
context.fillRect(0, 75, 75, 75);
context.fillStyle = "#f30";
context.fillRect(75, 75, 75, 75);

上述代码中，前面两个矩形的透明度相同，都是0.4；后面两个矩形的透明度相同，都是0.6。运行效果如图 4‑20 所示：

图4-20 globalAlpha属性设置透明度

如果要恢复globalAlpha的初始状态，只需简单的将其重置为1.0即可。当然，也可以调用restore()方法，恢复到save()时的状态。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》，并全部在 GitHub 上开源。

HTML5 颜色及透明度相关推荐

html中canvas设置透明度,HTML5 Canvas绘制时指定颜色与透明度的方法
这篇文章主要介绍了HTML5 Canvas绘制时指定颜色与透明度的方法,包括全局透明globalAlpha属性的介绍,需要的朋友可以参考下指定颜色黑色是Canvas绘制的默认色彩,要想换一种颜色的 ...
CSS盒模型、边框和背景、表格和列表、颜色和透明度、阴影和轮廓及长度单位rem
1.CSS 盒模型元素尺寸 CSS 盒模型中最基础的就是设置一个元素的尺寸大小.有三组样式来配置一个元素的尺寸大小,样式表如下: 属性值说明 CSS版本 width auto.长度值或百分比设 ...
php透明颜色的代码,PHP imagecolorallocatealpha - 为一幅图像分配颜色和透明度
PHP imagecolorallocatealpha - 为一幅图像分配颜色和透明度 imagecolorallocatealpha - 为一幅图像分配颜色和透明度. 语法 int imagecol ...
前端如何设置背景颜色的透明度 css中的 rgba() 函数详解：background-color: rgba(255,192,203,0.3)
目录前言 rgba() 函数详解再分享一个小技巧哈哈哈前言今天在开发移动端的时候感觉没背景颜色有点丑,再加上自己做的是蛋糕app,觉得暖色应该会很好看,于是就用了这行代码 backgroun ...
android 半透明色值_Android设置十六进制颜色不同透明度对应的值
六进制的颜色对应透明度如下: 100% - FF 95% - F2 90% - E6 85% - D9 80% - CC 75% - BF 70% - B3 65% - A6 60% - 99 55% ...
Albedo Color and Transparency 反照率颜色与透明度 Standard Shader系列6
Albedo Color and Transparency 反照率颜色与透明度本文档主要是对Unity官方手册的个人理解与总结(其实以翻译记录为主:>) 仅作为个人学习使用,不得作为商业用途, ...
ios 系统状态栏样式修改_超简单！！！ iOS设置状态栏、导航栏按钮、标题、颜色、透明度，偏移等...
原标题:超简单!!! iOS设置状态栏.导航栏按钮.标题.颜色.透明度,偏移等 1. 要实现以下这些效果都非常简单 2. 废话不多说,先看看实现效果 3. 下面告诉你我为什么说实现这些效果非常简单比 ...
页面顶部导航栏随着滚轮转动，页面下滑，导航栏背景颜色，透明度，字体，样式等改变
一.大盒子app里有一个heades的导航栏,通过:style="headStyle"来改变它的颜色等样式,需要改变的,不要在style样式里定义,否则代码会执行style里定义的 ...
HTML背景颜色及透明度设置
初学HTML,在学习的过程中偶然发现了背景颜色透明度的设置方法挺有趣,顺便把颜色的设置方法复习总结一下设置背景颜色有三种方法,分别是:sRGB,十六进制和颜色名: 十六进制: <p style ...
BasicAnimation：纯Swift的基础动画库，支持 iOS 属性动画：缩放、旋转、平移、背景颜色、透明度、阴影等和弹性动画
BasicAnimation https://github.com/ZuopanYao/BasicAnimation iOS 属性动画:缩放.旋转.平移.背景颜色.透明度.阴影等,一句代码的事支持以 ...

HTML5 颜色及透明度

颜色及透明度

HTML5 颜色及透明度相关推荐

最新文章

热门文章