這篇文章主要介紹“HTML5的
南潯網站制作公司哪家好，找創(chuàng)新互聯公司！從網頁設計、網站建設、微信開發(fā)、APP開發(fā)、響應式網站等網站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯公司2013年開創(chuàng)至今到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選創(chuàng)新互聯公司。
在網頁中使用canvas元素，像使用其他HTML標簽一樣簡單，然后利用JavaScript腳本調用繪圖API，繪制各種圖形。canvas擁有多種繪制路徑、矩形、圓形、字符及添加圖形的方法。
利用
1、獲取canvas對象
2、創(chuàng)建二維的繪圖上下文對象
3、在canvas上繪制文字
鏈接：
繪制基本的圖形
繪制直線：
moveTo（）方法用于創(chuàng)建新的子路徑，并設置其起始點。lineTo（）方法則設置了直線路徑的終點；而stroke（）方法用于沿該路徑繪制一條直線，如：
繪制矩形
繪圖API為繪制矩形提供了兩個專用的方法：strokeRect（）和fillRect（），可分別用于繪制矩形邊框和填充矩形區(qū)域。在繪制之前，往往需要先設置樣式，然后才能進行繪制。其中，strokeStyle可設置矩形邊框顏色，fillStyle可設置填充顏色，lineWidth可設置邊框寬度。
鏈接：
繪制圓形
在canvas中，所有基本圖形都是以路徑為基礎的，通常會調用linTo（）、rect（）和arc（）等方法設置一些路徑。在最后使用fill（）或stroke（）方法進行繪制邊框或填充區(qū)域時，都是參照這個路徑來進行的。使用路徑繪圖基本分為如下3個步驟：
1、創(chuàng)建繪圖路徑。常用到beginPath（）和closePath（）方法，每次調用beginPath（）方法都會產生一個新的子路徑。
2、設置繪圖樣式。使用strokeStyle屬性設置邊框顏色；使用lineWidth屬性設置邊框寬度；使用fllStyle屬性設置填充顏色。
3、繪制圖形。stroke（）方法繪制邊框；fill（）方法繪制填充區(qū)域。
鏈接：
繪制三角形
繪制三角形同樣需要通過繪制路徑的方法來實現，基本步驟與繪制圓形差不多，如：
closePath（）方法習慣性地放在路徑設置的最后一步，不要認為是路徑設置的結束，因為在此之后，還可以繼續(xù)設置路徑。
鏈接：
圖形組合
在canvas繪圖中，可以通過globalCompositeOperation屬性來設置如何在兩個圖形疊加的情況下組合顏色，用法如下：
參數value的合法值有12個，決定了12種圖形組合的類型，默認值是source-over。12種組合類型如下：
1、copy：只繪制新圖形，刪除其他所有內容。
2、darker：在圖形重疊的地方，顏色由兩個顏色值相減后決定。
3、destination-atop：已有的內容只在它和新的圖形重疊的地方保留，新圖形繪制于內容之后。
4、destination-in：在新圖形以及已有畫布重疊的地方，已有內容都保留，所有其他內容成為透明的。
5、destination-out：在已有內容和新圖形不重疊的地方，已有內容保留，所有其他內容成為透明的。
6、destination-over：新圖形繪制于已有內容的后面。
7、lighter：在圖形重疊的地方，顏色由兩種顏色值的加值來決定。
8、source-atop：只有在新圖形和已有內容重疊的地方，才繪制新圖形。
9、source-in：只有在新圖形和已有內容重疊的地方，新圖形才繪制，所有其他內容成為透明的。
10、source-out：只有在和已有圖形不重疊的地方，才繪制新圖形。
11、source-over：新圖形繪制于已有圖形的頂部，這是默認行為。
12、xor：在重疊和正常繪制的其他地方，圖形都成為透明的。
函數RectArc（context）是用來繪制組合圖形的，使用方法translate（）移動到不同的位置。
鏈接：
繪制曲線
在canvas中，繪圖API提供了多種曲線的繪制方法，主要的曲線繪制方法有arc（）、arcTo（）、quardraticCurveTo（）和bezierCureveTo（）。
使用arc（）方法，如：
假如在繪制圓弧的時候用closePath（）閉合繪制路徑，那么就會生成一個半圓。
鏈接：
使用arcTo（）方法：
arcTo（）方法使使用切線的方法繪制弧線，使用兩個目標點和一個半徑，為當前的子路徑添加一條弧線。與arc（）方法相比，同樣是繪制弧線，繪制思路和側重點不同。
鏈接：
使用quadraticCurveTo（）方法：
二次樣條曲線是曲線的一種，canvas繪圖API專門提供了此曲線的繪制方法。quadraticCurveTo（）方法為當前的子路徑添加一條二次樣條曲線。
鏈接：
使用bezierCurveTo（）方法：
貝塞爾曲線是應用于二維圖形應用程序中的數學曲線。與二次樣條曲線相比，貝塞爾曲線使用了兩個控制點，從而可以創(chuàng)建更復雜的曲線圖形。
鏈接：
繪制文本
通過
有些時候，開發(fā)人員需要知道所繪制的文本寬度，以方便進行布局。繪圖API挺了獲取繪制文本寬度的方法，measureText（）方法就是用來獲取文本的寬度。
鏈接：
創(chuàng)建對象陰影：
鏈接：
繪制線性漸變：
使用漸變需要三個步驟：首先是創(chuàng)建漸變對象；其次是設置漸變顏色和過渡方式；最后將漸變對象賦值給填充樣式或描邊樣式。
線性漸變是指起始點和結束點之間線性的內插顏色值，設置漸變顏色需要在漸變對象上使用addColorStop（）方法，在漸變中的某一點添加一個顏色變化。如：
鏈接：
繪制徑向漸變：
徑向漸變是指兩個指定圓的圓周之間放射性地表現顏色過渡效果。如：
鏈接：
繪制圖像：
使用drawImage（）方法可以將圖形添加到canvas畫布中，即繪制一幅圖像，有3種方法。
1、把整個圖像復制到畫布中，將其放置到指定的左上角坐標位置，并且將每個圖像像素映射成畫布坐標系統(tǒng)的一個單元，如：
2、把整個圖像復制到畫布中，但是允許用畫布單位來指定想要的圖像寬度和高度，如：
3、使用復雜，暫且不提。
裁切圖形：
在路徑繪圖中使用了兩種繪圖方法，即用于繪制線條的stroke（）方法和用于填充區(qū)域的fill（）方法。關于路徑的處理，還有一種方法叫作裁切方法clip（）。
裁切的區(qū)域是通過路徑來確定的，和繪制線條的方法和填充區(qū)域的方法一樣，也需要預先確定繪圖路徑，再執(zhí)行裁切區(qū)域路徑方法clip（），這樣就確定了裁切區(qū)域，如：
關于“HTML5的
重慶分公司
重慶分公司
