Heim > Artikel > Web-Frontend > Lernen Sie beim Spielen mit HTML5 (4) – Farben ändern
Lernen Sie beim Spielen mit HTML5 (4) – Farben ändern
- 黄舟Original
- 2017-03-29 14:56:521491Durchsuche
在上一节中我们讲了颜色和像素是怎么回事，其实大多数情况下，我们用不到像素级别的操作，我们只需要对颜色进行整体设置就行了。
一、基本颜色
在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>Das obige ist der detaillierte Inhalt vonLernen Sie beim Spielen mit HTML5 (4) – Farben ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Lernen Sie beim Spielen mit HTML5 (3) – Pixel und FarbenNächster Artikel：Lernen Sie beim Spielen mit HTML5 (3) – Pixel und Farben
In Verbindung stehende Artikel
Mehr sehen- Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite
- Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)
- Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9
- Reguläre Ausdrücke und neue HTML5-Elemente
- So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen