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>標簽,請使用 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 左洸 閱讀(2210) 評論(0)  編輯  收藏 所屬分類: HTML5
          主站蜘蛛池模板: 泸定县| 芦山县| 惠来县| 滦平县| 六枝特区| 油尖旺区| 扶余县| 常山县| 东辽县| 新竹县| 易门县| 巨野县| 新竹市| 县级市| 高密市| 新闻| 防城港市| 丹东市| 潞西市| 阜阳市| 阿克苏市| 镇平县| 荥经县| 疏勒县| 漳浦县| 吴堡县| 鞍山市| 马山县| 剑川县| 麻阳| 普兰店市| 东乡县| 德钦县| 江川县| 芒康县| 红安县| 于都县| 涟水县| 廊坊市| 银川市| 永川市|