在上一节HTML5 边玩边学（3）：像素和颜色中我们讲了颜色和像素是怎么回事，其实大多数情况下，我们用不到像素级别的操作，我们只需要对颜色进行整体设置就行了。
一、基本颜色
在HTML5 边玩边学（2）：基础绘图中，我们提到过有两个上下文属性可以用来设置颜色：
strokeStyle 决定了你当前要绘制的线条的颜色
fillStyle 决定了你当前要填充的区域的颜色
颜色值只要是符合CSS3 颜色值标准的有效字符串都可以。下面的例子都表示同一种颜色。例如：
//这些 fillStyle 的值均为'橙色'，ctx是上下文对象
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";
下面我们给出一个简单的例子，分别绘制了36个实心圆和36个空心圆，在给他们设置颜色的时候就分别用到了 strokeStyle 和 fillStyle 代码如下：
<
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边玩边学（3）：像素和颜色中讲过，一个像素的颜色值由四个字节组成，第四个字节一般用不到，但是当你需要设置透明度的时候就需要第四个字节了。
一般情况下我们用RGB格式来设置一个颜色，比如：”rgb(0,0,255)” 表示一个纯蓝色，考虑透明度的时候，我们就用RGBA格式来设置一个颜色，比如：”rgba(0,0,255,0.5)” 表示一个透明度为0.5的纯蓝色。字母 a 即表示颜色的透明度，好像也叫颜色的 Alpha 值，范围为：0-1，0代表完全透明，1代表完全不透明。下面的例子分别设置了五种不同的透明度来绘制蓝色矩形：
<
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 ，这个属性用来控制全局透明度。当你设置好这个属性以后，后面绘制的一系列图形都采用同样的透明度，你只需要设置颜色即可，见下面的例子：
<
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 之间的数值，表示过渡颜色所在位置。下面的例子给出了四个线性渐变和两个径向渐变，大家可以看看代码有什么不同：
<
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 颜色值，默认是全透明的黑色。
下面的例子是分别显示一个带阴影的矩形，一个带阴影的文本，代码如下：
<
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
>
千百度
© 版权声明
1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。
2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。
5.本站是非经营性个人站点，所有软件信息均来自网络，所有资源仅供学习参考研究目的，并不贩卖软件，不存在任何商业目的及用途
THE END
暂无评论内容