Home > Article > Web Front-end > Learn while playing with HTML5 (4) - Changing colors
Learn while playing with HTML5 (4) - Changing colors
- 黄舟Original
- 2017-03-29 14:56:521446browse
在上一节中我们讲了颜色和像素是怎么回事，其实大多数情况下，我们用不到像素级别的操作，我们只需要对颜色进行整体设置就行了。
一、基本颜色
在HTML5边玩边学（二）-基础绘图中，我们提到过有两个上下文属性可以用来设置颜色：
strokeStyle 决定了你当前要绘制的线条的颜色
fillStyle 决定了你当前要填充的区域的颜色
颜色值只要是符合CSS3 颜色值标准的有效字符串都可以。下面的例子都表示同一种颜色。例如：
下面我们给出一个简单的例子，分别绘制了36个实心圆和36个空心圆，在给他们设置颜色的时候就分别用到了 strokeStyle 和 fillStyle 代码如下：
不同的颜色
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--><canvas id="canvas1" width="150" height="150" style=" background-color: black">
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
</canvas><br/>
<input type="button" value="fillStyle" onclick="fillStyle();" />
<input type="button" value="strokeStyle" onclick="strokeStyle();" />
<script type="text/javascript">
function fillStyle() {
//获取上下文对象
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
//清空画布
ctx.clearRect(0,0,150,150);
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
//设置填充色，循环参数 i,j 控制颜色的该变量
ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +Math.floor(255-42.5*j) + ',0)';
//准备画
ctx.beginPath();
//画圆轮廓，循环参数 i,j 控制圆心的位置
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
//填充并显示
ctx.fill();
}
}
}
function strokeStyle() {
//获取上下文对象
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
//清空画布
ctx.clearRect(0,0,150,150);
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
//设置线条颜色，循环参数 i,j 控制颜色的该变量
ctx.strokeStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +Math.floor(255-42.5*j) + ',0)';
//准备画
ctx.beginPath();
//画圆轮廓，循环参数 i,j 控制圆心的位置
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
//上屏显示
ctx.stroke()
}
}
}
</script>二、透明度 Transparency
在第三节HTML5边玩边学（三）-像素和颜色中讲过，一个像素的颜色值由四个字节组成，第四个字节一般用不到，但是当你需要设置透明度的时候就需要第四个字节了。
一般情况下我们用RGB格式来设置一个颜色，比如："rgb(0,0,255)" 表示一个纯蓝色
考虑透明度的时候，我们就用RGBA格式来设置一个颜色，比如："rgba(0,0,255,0.5)" 表示一个透明度为0.5的纯蓝色
字母 a 即表示颜色的透明度，好像也叫颜色的 Alpha 值，范围为：0-1，0代表完全透明，1代表完全不透明
下面的例子分别设置了五种不同的透明度来绘制蓝色矩形
颜色的透明度
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--><canvas id="canvas2" width="150" height="150" style="background-position: center center;
background-image:url(http://images.cnblogs.com/cnblogs_com/myqiao/262115/r_2204793492575248335.jpg)">
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
</canvas><br/>
颜色透明度：<input type="button" value="0" onclick="alphaTest1(0);" />
<input type="button" value="0.2" onclick="alphaTest1(0.2);" />
<input type="button" value="0.4" onclick="alphaTest1(0.4);" />
<input type="button" value="0.6" onclick="alphaTest1(0.6);" />
<input type="button" value="0.8" onclick="alphaTest1(0.8);" />
<input type="button" value="1" onclick="alphaTest1(1);" />
<script type="text/javascript">
function alphaTest1(alpah) {
//获取上下文对象
var canvas = document.getElementById("canvas2");
var ctx = canvas.getContext("2d");
//清空画布
ctx.clearRect(0,0,150,150);
//设置有透明度的蓝色
ctx.fillStyle="rgba(0,0,255,"+alpah+")"
ctx.fillRect(20, 20, 110, 110)
}
</script>上下文对象还有一个控制透明度的属性： globalAlpha ，这个属性用来控制全局透明度。
当你设置好这个属性以后，后面绘制的一系列图形都采用同样的透明度，你只需要设置颜色即可，见下面的例子：
全局透明度
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--><canvas id="canvas3" width="150" height="150" style="background-position: center center;
background-image:url(http://images.cnblogs.com/cnblogs_com/myqiao/262115/r_2204793492575248335.jpg)">
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
</canvas><br/>
全局透明度：<input type="button" value="0" onclick="alphaTest2(0);" />
<input type="button" value="0.2" onclick="alphaTest2(0.2);" />
<input type="button" value="0.4" onclick="alphaTest2(0.4);" />
<input type="button" value="0.6" onclick="alphaTest2(0.6);" />
<input type="button" value="0.8" onclick="alphaTest2(0.8);" />
<input type="button" value="1" onclick="alphaTest2(1);" />
<script type="text/javascript">
function alphaTest2(alpah){
//获取上下文对象
var canvas = document.getElementById("canvas3");
var ctx = canvas.getContext("2d");
//清空画布
ctx.clearRect(0,0,150,150);
//设置全局透明度
ctx.globalAlpha=alpah
//绘制各种颜色的形状
ctx.fillStyle="red"
ctx.fillRect(10, 10, 30, 30)
ctx.fillStyle="green"
ctx.fillRect(10, 50, 30, 30)
ctx.fillStyle="blue"
ctx.fillRect(10, 90, 30, 30)
ctx.fillStyle="yellow"
ctx.beginPath()
ctx.arc(100, 75, 40, 0, 360)
ctx.fill()
}
</script>三、渐变色 Gradients
上下文对象有两个方法可以创建一个叫做 canvasGradient 的对象，并用它设置 fillStyle 或 strokeStyle 属性，绘制出来的图形就有渐变效果了
createLinearGradient(x1,y1,x2,y2)
创建线性渐变：接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
createRadialGradient(x1,y1,r1,x2,y2,r2)
创建径向渐变，接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
创建出 canvasGradient 对象后，我们可以用 addColorStop 方法设置过渡的中间色标，如下：
addColorStop(position, color)
position 参数必须是一个 0.0 与 1.0 之间的数值，表示过渡颜色所在位置。
下面的例子给出了四个线性渐变和两个径向渐变，大家可以看看代码有什么不同：
渐变色
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--><canvas id="canvas4" width="150" height="150" style=" background-color: black">
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
</canvas><br/>
渐变：<input type="button" value="横向渐变" onclick="gradients1();" />
<input type="button" value="纵向渐变" onclick="gradients2();" />
<input type="button" value="斜向渐变" onclick="gradients3();" />
<input type="button" value="突变" onclick="gradients4();" />
<input type="button" value="径向渐变" onclick="gradients5();" />
<input type="button" value="偏心径向渐变" onclick="gradients6();" />
<script type="text/javascript">
function gradients1() {
var ctx = document.getElementById('canvas4').getContext('2d');
//清空画布
ctx.clearRect(0,0,150,150);
//创建横向渐变对象
var lingrad = ctx.createLinearGradient(0,0,150,0);
//添加色标
lingrad.addColorStop(0, 'blue');
lingrad.addColorStop(0.5, 'green');
lingrad.addColorStop(1, 'white');
ctx.fillStyle = lingrad;
ctx.fillRect(10,10,130,130);
}
function gradients2() {
var ctx = document.getElementById('canvas4').getContext('2d');
//清空画布
ctx.clearRect(0,0,150,150);
//创建纵向渐变对象
var lingrad = ctx.createLinearGradient(0,0,0,150);
//添加色标
lingrad.addColorStop(0, 'blue');
lingrad.addColorStop(0.4, 'green');
lingrad.addColorStop(1, 'white');
ctx.fillStyle = lingrad;
ctx.fillRect(10,10,130,130);
}
function gradients3() {
var ctx = document.getElementById('canvas4').getContext('2d');
//清空画布
ctx.clearRect(0,0,150,150);
//创建纵向渐变对象
var lingrad = ctx.createLinearGradient(0,0,150,150);
lingrad.addColorStop(0, 'blue');
lingrad.addColorStop(0.5, 'green');
lingrad.addColorStop(1, 'white');
ctx.fillStyle = lingrad;
ctx.fillRect(10,10,130,130);
}
function gradients4() {
var ctx = document.getElementById('canvas4').getContext('2d');
//清空画布
ctx.clearRect(0,0,150,150);
//创建斜向渐变对象
var lingrad = ctx.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, 'blue');
lingrad.addColorStop(0.5, 'white');
lingrad.addColorStop(0.5, 'green');
lingrad.addColorStop(1, 'white');
ctx.fillStyle = lingrad;
ctx.fillRect(10,10,130,130);
}
function gradients5() {
var ctx = document.getElementById('canvas4').getContext('2d');
//清空画布
ctx.clearRect(0,0,150,150);
//创建径向渐变对象
var lingrad = ctx.createRadialGradient(75,75,10,75,75,70);
lingrad.addColorStop(0, 'white');
lingrad.addColorStop(1, 'rgba(255,255,255,0)');
ctx.fillStyle = lingrad;
ctx.arc(75, 75, 70, 0, 360);
ctx.fill();
}
function gradients6() {
var ctx = document.getElementById('canvas4').getContext('2d');
//清空画布
ctx.clearRect(0,0,150,150);
//创建偏心径向渐变对象
var lingrad = ctx.createRadialGradient(5,5,10,75,75,70);
lingrad.addColorStop(0, 'white');
lingrad.addColorStop(1, 'rgba(255,255,255,0)');
ctx.fillStyle = lingrad;
ctx.arc(75, 75, 70, 0, 360);
ctx.fill();
}
</script>
四、阴影
上下文对象有四个属性来设置阴影，分别是
shadowOffsetX = float
shadowOffsetY = float
shadowBlur = float
shadowColor = color
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，他们默认都是 0。
shadowBlur 用于设定阴影的模糊程度，默认为 0。
shadowColor 用于设定阴影效果的延伸，值可以是标准的 CSS 颜色值，默认是全透明的黑色。
下面的例子是分别显示一个带阴影的矩形，一个带阴影的文本，代码如下：
阴影
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--><canvas id="canvas5" width="150" height="150" style=" background-color: black">
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
</canvas><br/>
<input type="button" value="图形阴影" onclick="shadow1();" />
<input type="button" value="文字阴影" onclick="shadow2();" />
<script type="text/javascript">
function shadow1() {
var ctx = document.getElementById('canvas5').getContext('2d');
//清空画布
ctx.clearRect(0,0,150,150);
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 4;
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 130, 130);
}
function shadow2() {
var ctx = document.getElementById('canvas5').getContext('2d');
//清空画布
ctx.clearRect(0,0,150,150);
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(255, 255, 255, 0.5)";
ctx.font = "20px Times New Roman";
ctx.fillStyle = "red";
ctx.fillText("Sample String", 15, 70);
}
</script>The above is the detailed content of Learn while playing with HTML5 (4) - Changing colors. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Learn while playing with HTML5 (3) - Pixels and ColorsNext article：Learn while playing with HTML5 (3) - Pixels and Colors
Related articles
See more- AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds
- HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)
- Detailed explanation of image drawing examples in HTML5 canvas 9
- Regular expressions and new HTML5 elements
- How to combine NodeJS and HTML5 to drag and drop multiple files to upload to the server