posts - 48,comments - 156,trackbacks - 0

 

在上一节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">
你的浏览器不支持 &lt;canvas&gt;标签,请使用 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>

 {{{你的浏览器不支持 <canvas>标签,请使用 Chrome 浏览器 或者 FireFox 浏览器
}}}

 

二、透明度 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)">
    你的浏览器不支持 
&lt;canvas&gt;标签,请使用 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(
2020110110)
    }
</script>

 {{{ 你的浏览器不支持 <canvas>标签,请使用 Chrome 浏览器 或者 FireFox 浏览器
颜色透明度: }}}

 

上下文对象还有一个控制透明度的属性: 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)">
    你的浏览器不支持 &lt;canvas&gt;标签,请使用 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(
10103030)
        ctx.fillStyle
="green"
        ctx.fillRect(
10503030)
        ctx.fillStyle
="blue"
        ctx.fillRect(
10903030)
        ctx.fillStyle
="yellow"
        ctx.beginPath()
        ctx.arc(
10075400360)
        ctx.fill()
    }
</script>

 {{{ 你的浏览器不支持 <canvas>标签,请使用 Chrome 浏览器 或者 FireFox 浏览器
全局透明度: }}}

 

三、渐变色 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">
    你的浏览器不支持 
&lt;canvas&gt;标签,请使用 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(
7575700360);
        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(
7575700360);
        ctx.fill();
    }
</script>

 {{{ 你的浏览器不支持 <canvas>标签,请使用 Chrome 浏览器 或者 FireFox 浏览器
渐变: }}}

 

四、阴影

上下文对象有四个属性来设置阴影,分别是

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">
    你的浏览器不支持 
&lt;canvas&gt;标签,请使用 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(
1010130130);
    }

    
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"1570);
    }
</script>

{{{ 你的浏览器不支持 <canvas>标签,请使用 Chrome 浏览器 或者 FireFox 浏览器
}}}

声明:为本文为原创文章,作者保留所有权利!欢迎转载,转载请注明作者左洸和出处博客园 

//==================================================

posted on 2010-10-03 20:11 左洸 阅读(2198) 评论(0)  编辑  收藏 所属分类: HTML5

只有注册用户登录后才能发表评论。


网站导航: