HTML5 學習手筆二：canvas API 繪製樹形圖案A

時間 2020-02-07

標籤 html5 html 學習手筆 canvas api 繪製圖案欄目 HTML5 简体版

原文原文鏈接

上篇經過對canvas 畫對角線，瞭解了一些canvas畫圖基本原理。如今能夠利用HTML5 canvas API建立一個場景：帶有長跑跑道的樹林。javascript

本篇大綱

用canvas API繪製樹木的樹冠
爲樹冠的邊框架加粗而且填充樹冠顏色
爲樹冠創造一個強大的樹幹
繪製跑道

用canvas API繪製樹木的樹冠

原理仍是與上篇畫對角線同樣，只是步驟增多而已，先看代碼：java

      <script type="text/javascript"> 
  
function createCanopyPath(context){ 
  
                   context.beginPath(); 
  
                  context.moveTo(-25,-50); 
  
                  context.lineTo(-10,-80); 
  
                  context.lineTo(-20,-80); 
  
                  context.lineTo(-5,-110); 
  
                  context.lineTo(-15,-110); 
  
                  context.lineTo(0,-140); 
  
                  context.lineTo(15,-110); 
  
                  context.lineTo(5,-110); 
  
                  context.lineTo(20,-80); 
  
                  context.lineTo(10,-80); 
  
                  context.lineTo(25,-50); 
  
                  context.closePath(); 
  
                 } 
  
function drawTrails(){ 
  
var canvas=document.getElementById('diagonal'); 
  
var context=canvas.getContext('2d'); 
  
                 context.save(); 
  
                 context.translate(130,250); 
  
                 createCanopyPath(context); 
  
                 context.stroke(); 
  
                 context.restore(); 
  
         } 
  
  window.addEventListener("load",drawTrails, 
  true); 
  
         </script> 
   
   複製代碼

DEMO效果以下：canvas

上面的代碼中有一個特殊的函數叫作closePath。這個函數的行爲同lineTo很像，惟一的差異在於closePath會將路徑的起始座標自動做爲目標座標。closePath還會通知canvas當前繪製的圖形己經閉合或者造成了徹底封閉的區域。框架

爲樹冠的邊框架加粗而且填充樹冠顏色

爲了使樹冠更加形象而且看起來像真的樹，不得不利用canvas 的API繪製其圖形外觀，代碼以下：ide

function drawTrails(){ 
  
   var canvas=document.getElementById('diagonal'); 
   
   var context=canvas.getContext('2d'); 
   
                 context.save(); 
   
                 context.translate(130,250); 
   
                 createCanopyPath(context); 
   
   // 
   加寬線條 
   
                 context.lineWidth=4; 
   
   // 
   平滑路徑的接合點 
   
                 context.lineJoin='round'; 
   
   // 
   將顏色改爲棕色 
   
                 context.strokeStyle='#663300'; 
   
   // 
   將填充色設置爲綠色並填充樹冠 
   
                 context.fillStyle='#339900'; 
   
                 context.fill(); 
   
                 context.stroke(); 
   
                 context.restore(); 
   
         } 
  
   複製代碼

DEMO效果見下面運行效果：函數

lineJoin屬性設置爲round，這是修改當前形狀中線段的鏈接方式，讓拐角變得更加油；也能夠把lineJoin屬性設置成bevel或者miter來變換拐角樣式。spa

strokeStyle屬性是爲了改變線條顏色。rest

fillStyle屬性是爲了設置填充顏色code

context 的fill 函數是爲了可讓canvas對當前圖形中全部的閉合路徑內部的像素點進行填充，配合fillStyle 填充內部像形點顏色。orm

爲樹冠創造一個強大的樹幹

建立樹幹有兩種方法：

用咱們上面學過的使用線條而後配合closePath畫樹幹
HTML5 提供了一個強大的填充矩形的函數 fillRect 能夠畫一塊矩形x軸、y軸、須要畫的寬度和高度便可

在這裏咱們使用fillRect 來構建樹幹。代碼以下：

     context.fillStyle='#663300'; 
   
                 context.fillRect(-5,-50,10,50); 
  
   複製代碼

效果DEMO以下：

與fillRect相關的函數還有：strokeRect和clearRect。strokeRect的做用是基於給出的位置和座標畫出矩形的輪廓，clearRect的做用是清除矩形區域內的全部內容並將它恢復到初始狀態，即透明。

繪製跑道

完成本篇最後一個功能，在小樹旁邊畫上一個跑道。代碼以下：

function drawTrails(){ 
  
var canvas=document.getElementById('diagonal'); 
  
var context=canvas.getContext('2d'); 
  
                 context.save(); 
  
                 context.translate(130,250); 
  
                 createCanopyPath(context); 
  
//加寬線條
                 context.lineWidth=4; 
  
//平滑路徑的接合點
                 context.lineJoin='round'; 
  
//將顏色改爲棕色
                 context.strokeStyle='#663300'; 
  
//將填充色設置爲綠色並填充樹冠
                 context.fillStyle='#339900'; 
  
                 context.fill(); 
  
                 context.fillStyle='#663300'; 
  
                 context.fillRect(-5,-50,10,50); 
  
                 context.stroke(); 
  
                 context.restore(); 
  
                 context.save(); 
  
                 context.translate(-10,350); 
  
                 context.beginPath(); 
  
                 context.moveTo(0,0); 
  
//第一條曲線向右上方彎曲
                 context.quadraticCurveTo(170,-50,260,-190); 
  
//第二條曲線向右下方彎曲
                 context.quadraticCurveTo(310,-250,410,-250); 
  
                 context.strokeStyle='#663300'; 
  
                 context.lineWidth=20; 
  
                 context.stroke(); 
  
                 context.restore(); 
  
         }  
   
   複製代碼