HTML5边玩边学（4）：变幻的色彩

在上一节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( 20 , 20 , 110 , 110 )
    }
< / 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)">
    你的浏览器不支持 <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>

{{{ 你的浏览器不支持 <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( 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>

{{{ 你的浏览器不支持 <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( 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>

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

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

HTML5边玩边学（4）：变幻的色彩

你可能感兴趣的:(HTML5边玩边学（4）：变幻的色彩)