本文將為大家詳細(xì)介紹“怎么用HTML5 Canvas來繪制三角形和矩形等多邊形”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會更新不同的知識點，希望這篇“怎么用HTML5 Canvas來繪制三角形和矩形等多邊形”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識吧。

成都創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷、網(wǎng)站重做改版、革吉網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開發(fā)、成都商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為革吉等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

html是什么

html的全稱為超文本標(biāo)記語言，它是一種標(biāo)記語言，包含了一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁。

使用HTML5 Canvas繪制多邊形所需的CanvasRenderingContext2D對象的主要屬性和方法，如下：

繪制三角形

   
   
   
   
   
   
   
  
   
   
您的瀏覽器不支持canvas標(biāo)簽。   
   
  
  
   
//獲取Canvas對象(畫布)   
var canvas = document.getElementById("myCanvas");   
//簡單地檢測當(dāng)前瀏覽器是否支持Canvas對象，以免在一些不支持html5的瀏覽器中提示語法錯誤   
if(canvas.getContext){     
    //獲取對應(yīng)的CanvasRenderingContext2D對象(畫筆)   
    var ctx = canvas.getContext("2d");     
       
    //開始一個新的繪制路徑   
    ctx.beginPath();   
    //設(shè)置線條顏色為藍(lán)色   
    ctx.strokeStyle = "blue";   
    //設(shè)置路徑起點坐標(biāo)   
    ctx.moveTo(20, 50);   
    //繪制直線線段到坐標(biāo)點(60, 50)   
    ctx.lineTo(20, 100);   
    //繪制直線線段到坐標(biāo)點(60, 90)   
    ctx.lineTo(70, 100);       
    //先關(guān)閉繪制路徑。注意，此時將會使用直線連接當(dāng)前端點和起始端點。   
    ctx.closePath();   
    //最后，按照繪制路徑畫出直線   
    ctx.stroke();   
}   
   
   

對應(yīng)的顯示效果如下：

繪制矩形
之所以將Canvas繪制矩形單獨提出來，是因為Canvas的畫筆工具——CanvasRenderingContext2D對象為繪制矩形提供了專用的方法。

  
  
  
  
  
  
  
  
  
  
您的瀏覽器不支持canvas標(biāo)簽。   
  
  
  
//獲取Canvas對象(畫布)   
var canvas = document.getElementById("myCanvas");   
//簡單地檢測當(dāng)前瀏覽器是否支持Canvas對象，以免在一些不支持html5的瀏覽器中提示語法錯誤   
if(canvas.getContext){     
    //獲取對應(yīng)的CanvasRenderingContext2D對象(畫筆)   
    var ctx = canvas.getContext("2d");     
       
    //開始一個新的繪制路徑   
    ctx.beginPath();   
    //設(shè)置線條顏色為藍(lán)色   
    ctx.strokeStyle = "blue";   
    //以canvas中的坐標(biāo)點(10,10)作為繪制起始點，繪制一個寬度為80px、高度為50px的矩形   
    ctx.rect(10, 10, 80, 50);   
    //按照指定的路徑繪制直線   
    ctx.stroke();   
    //關(guān)閉繪制路徑   
    ctx.closePath();   
}   
  
  

對應(yīng)的矩形效果顯示如下：

如果你能讀到這里，小編希望你對“怎么用HTML5 Canvas來繪制三角形和矩形等多邊形”這一關(guān)鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領(lǐng)會，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！