HTML5 學習手筆三：canvas API 繪制樹形圖案B

繼續為上篇的跑道樹林添磚加瓦。

---

 

本篇大綱

1. 加載圖像做為樹干的背景
2. 為樹干實現漸變效果
3. 使用背景圖讓跑道更加真實
4. 1):使用HTML5的scale功能縮放樹木 。2):使用rotate制造傾倒樹木的效果
5. 為樹木添加陽光照射下的陰影效果
6. 添加文本標題，並為文本增加陰影效果，使用Canvas Shadow API。

 

---

加載圖像做為樹干的背景，功能點為：在canvas 中插入圖片

上篇使用矩形填充顏色的功能為樹冠增加樹干，但總體效果並不是很理想，達不到真正樹木的要求。我們需要一張更帶有樹皮紋理的圖片做為樹干，基本的步驟分為：

1. 創建圖片對象
2. 為圖片對象指定圖片來源
3. 在圖片加載完成后，將其顯示在canvas上。 

圖片：

 

具體功能看代碼先：

  var bark= new Image();
                bark.src="bark.jpg";
                 // 圖片加載完成后，將其顯示在canvas上.
                bark.onload= function(){
                        drawTrails();
                } 

將上文的fillRect方法替換成：

// 使用圖片的方式畫樹干
                context.drawImage(bark,-5,-50,10,50); 

 

得到的效果如下：

上面DEMO效果樹干看起來顯得更有質感了。

---

 

 為樹干實現漸變效果

 有時候會因為光照的原因和視角原因，我們看樹干的時候會覺得處於不同顏色，那么在我們本篇的例子中如何實現這一漸變的效果的呢？HTML5 canvas API有提供漸變的功能，要實現這一功能需要最少實現以下三步：

1. 創建漸變對象
2. 為漸變對象設置顏色，指明過渡方式
3.  在context 上下文為其填充樣式或者搭邊樣式設置漸變

添加漸變的代碼如下：

// 使用漸變方式畫樹干
                 // 創建用作樹干紋理的三階水平漸變
                 var trunkGradient=context.createLinearGradient(-5,-50,5,50);
                
                 // 從左到右依次的顏色漸變為：
                 // 位於最左邊的顏色0
                trunkGradient.addColorStop(0,'#663300');

                 // 中間偏左的位置0.4
                trunkGradient.addColorStop(0.4,'#996600');

                 // 最右邊的位置1
                trunkGradient.addColorStop(1,'#552200');

                context.fillStyle=trunkGradient;
                context.fillRect(-5,-50,10,50);

                 // 創建垂直漸變
                 var canopyShadow=context.createLinearGradient(0,-50,0,0);
                
                 // 投影漸變的起點是透明度設為50%的黑色
                canopyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
                canopyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
        
                context.fillStyle=canopyShadow;
                context.fillRect(-5,-50,10,50); 

 

DEMO運行效果如下：

 

可以將漸變看做是顏色湍着一條線進行緩慢地變化。例如,如果為漸變對象提供了A、B兩個點，不論是繪制還是填充，只要從A移動到B時，都會帶來顏色的變化。 

     要設置顯示哪種顏色，在漸變對象上使用addColorStop 函數即可。這個函數允許指定兩個參數：顏色和偏移量。

     顏色參數是指開發人員希望在偏移位置搭邊或填充時所使用的顏色。

     偏移量是一個0.0到1.0之間的數值，代表沿着漸變線漸變的距離有多遠。

 

---

 

 使用背景圖讓跑道更加真實

 我們讓樹干加載圖片讓其更加有質感，為樹干設置漸變讓其看起來更加真實。跑道我們可以讓它加載一張背景圖讓它看起來像一條礫石的跑道。

圖片如下： 

 

 使用代碼如下：

var gravel= new Image();
                gravel.src="http://images.cnblogs.com/cnblogs_com/terryblog/gravel.jpg";    
                gravel.onload= function(){
                        drawTrails();
                } 

 將drawTrails 里面的填充樣式方法修改為：

  context.strokeStyle=context.createPattern(gravel,'repeat');

 最后我們看到的效果就是這樣：

上篇代碼使用到了createPattern方法，該方法為創建返回一個CanvasPattern 對象，該對象表示一個貼圖圖像所定義的模式。要使用一個模式來勾勒線條或填充區域，可以把一個CanvasPattern對象用作stokeStyle 屬性或fillStyle 屬性的值。

參數	描述
image	需要貼圖的圖像。 這個參數通常是一個 Image 對象，但是也可以使用一個 Canvas 元素。
repetitionStyle	說明圖像如何貼圖。可能的值如下所示： "repeat" - 在各個方向上都對圖像貼圖。默認值。 "repeat-x" - 只在 X 方向上貼圖。 "repeat-y" - 只在 Y 方向上貼圖。 "no-repeat" - 不貼圖，只使用它一次。

 提示：

注釋：Firefox 1.5 只支持 "repeat" 方式，其他的都被忽略。

 

---

 1):使用HTML5的scale功能縮放樹木 。2):使用rotate制造傾倒樹木的效果

為了符合樹林的特點，還必須再另外制造樹木和傾倒的樹木，離可視點的比較近的地方往往我們會覺得看起來比較大。這些功能都可以用HTML的HTML DOM CanvasRenderingContext2D 對象實現。
  1)使用HTML5的scale功能縮放樹木，代碼如下：

 

             context.save();  
          
                 context.translate(260,500); 
          
                 context.scale(2,2); 
          
                 drawTree(context); 
          
                 context.restore(); 
         

 關於scale 方法的功能描述和語法參考如下：

 

定義和用法

scale() 方法標注畫布的用戶坐標系統。

語法

scale(sx, sy)

參數

參數	描述
sx, sy	水平和垂直的縮放因子。

描述

scale() 方法為畫布的當前變換矩陣添加一個縮放變換。縮放通過獨立的水平和垂直縮放因子來完成。例如，傳遞一個值 2.0 和 0.5 將會導致繪圖路徑寬度變為原來的兩倍，而高度變為原來的 1/2。指定一個負的 sx 值，會導致 X 坐標沿 Y 軸對折，而指定一個負的 sy 會導致 Y 坐標沿着 X 軸對折。

使用rotate制造傾倒樹木的效果，代碼如下：

 context.save();
                context.translate(120,520);
                context.scale(1.5,1);
                context.rotate(1.57);
                drawTree(context);

rotate的功能描述和語法參考如下：

定義和用法

rotate() 方法旋轉畫布的坐標系統。

語法

rotate(angle)

參數

參數	描述
angle	旋轉的量，用弧度表示。正值表示順時針方向旋轉，負值表示逆時針方向旋轉。

描述

rotate() 方法通過指定一個角度，改變了畫布坐標和 Web 瀏覽器中的 <Canvas> 元素的像素之間的映射，使得任意后續繪圖在畫布中都顯示為旋轉的。它並沒有旋轉 <Canvas> 元素本身。注意，這個角度是用弧度指定的。

提示：如需把角度轉換為弧度，請乘以 Math.PI 並除以 180。 

 那么我們最終可以看到下面這樣的效果：

好了，是不是還缺少些什么？

---

 

  為樹木添加陽光照射下的陰影效果

嗯，對了。還少了日照陰影效果。 實現陰影效果通常的做法是重新繪制一遍原來的東西，然后通過傾斜和顏色填充的方法來實現，本篇DEMO也是使用的相同的方法，參考代碼見下方：

context.save();
context.transform(1,0,-0.5,1,0,0);
                context.scale(1,0.6);
                context.fillStyle='rgba(0,0,0,0.2)';
                context.fillRect(-5,-50,10,50);
                createCanopyPath(context);
                context.fill();
                context.restore();     

transform參數為：context.transform(m11,m12,m21,m22,dx,dy)

其中：m11,m12,m21,m22四個參數用來修改使用這個方法之后，繪制圖形的計算方法，以達到變形目的

         dx表示將坐標原點在x軸上向右移動x個單位

          dy表示將坐標原點在y周上向下移動y個單位 

 

通過上面的代碼，添加在drawTree方法中，最終我們看到下面的運行效果：

效果己經不錯了。

最后添加點標題字體之類的東西，慶祝一下吧。

---

 

 添加文本標題，並為文本增加陰影效果，使用Canvas Shadow API

先看一下要實現的效果：

上面效果涉及兩點：

1. 如何在canvas 上添加文本
2. 如何為文本添加陰影效果 

 

參考代碼如下：

 //添加標題

                           context.save(); 
          
                  
          // 
          指定字體大小，並且指定字體庫 
          
                 context.font="60px impact"; 
          
                 context.fillStyle='#996600'; 
          
                 context.textAlign='center'; 
          
 
          
                  
          // 
          添加字體的陰影 
          
                 context.shadowColor='rgba(0,0,0,0.2)'; 
          
                 context.shadowOffsetX=15; 
          
                 context.shadowOffsetY=-10; 
          
                 context.shadowBlur=2; 
          
                  
          // 
          The fillText method takes four parameters (text,x,y,maxWidth). 
          
                 context.fillText('My First Html 5 page',200,60,400); 
          
 
          
                 context.restore(); 
         

文本功能的屬性介紹 

HTML5 Canvas API 有着強大的文本功能，可以描繪文本輪廓和填充文本內部；同時所有能夠應用其他圖形的變換和樣式都能用於文本。

context 對象的文本繪制功能由兩個函數組成：

fillText(text,x,y,maxWidth)

strokeText(text,x,y,maxWidth)

 文本涉及到的屬性為：

font ->css 字體字符串，如本篇的impact ,italic Arial,scan-serif等

textAlign->start、end、left、right、center 默認是start

textBaseline->top、hanging、middle、alphabetic、ideographic、bottom 默認是alphabetic

 陰影功能的屬性介紹

HTML5 還內置了Canvas Shadow API可以為文本添加模糊陰影效果。

陰影使用涉及到的屬性為：

shadowColor -> 任何CSS中的顏色值，可以使用透明度

shadowOffsetX -> 像素值，值為正數，向右移動陰影；值為負數，向左移動陰影；

ShadowOffsetY -> 像素值，值為正數，向下移動陰影；值為負數，向上移動陰影； 

shdowBlur -> 高斯模糊值，值越大，陰影邊緣越模糊。

注意：

shadowColor 或者其他任意一項屬性的值被賦為非默認值時，路徑、文本和圖片上的陰影效果就會被觸發。

 

完。

代碼下載：HTML5 Canvas源碼

本文參考：pro HTML5 Programming.