HTML5로 놀면서 배우기 (4) - 색상 변경
在上一节中我们讲了颜色和像素是怎么回事，其实大多数情况下，我们用不到像素级别的操作，我们只需要对颜色进行整体设置就行了。
一、基本颜色
在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>위 내용은 HTML5로 놀면서 배우기 (4) - 색상 변경의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7552
15
1382
52
83
11
58
19
22
95
HTML의 테이블 테두리
Sep 04, 2024 pm 04:49 PM
HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.
HTML 여백-왼쪽
Sep 04, 2024 pm 04:48 PM
HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.
HTML의 중첩 테이블
Sep 04, 2024 pm 04:49 PM
HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.
HTML 테이블 레이아웃
Sep 04, 2024 pm 04:54 PM
HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.
HTML 입력 자리 표시자
Sep 04, 2024 pm 04:54 PM
HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.
HTML 정렬 목록
Sep 04, 2024 pm 04:43 PM
HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.
HTML에서 텍스트 이동
Sep 04, 2024 pm 04:45 PM
HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.
HTML 온클릭 버튼
Sep 04, 2024 pm 04:49 PM
HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.
