資源描述：
《繪圖功能canvas》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在應(yīng)用文檔-天天文庫。
1、實用文案繪圖功能Canvas一、繪制矩形目前有三種繪制矩形的語法：fillRect(x,y,width,height):繪制一個實心矩形strokeRect(x,y,width,height):繪制一個矩形邊框clearRect(x,y,width,height):清楚指定的區(qū)域矩形利用fillStyle和strokeStyle屬性可以方便的設(shè)置矩形的填充和線條例：二、應(yīng)用canvasAPI繪制曲線路徑在每個canvas實例對象中都擁有一個path對象，創(chuàng)建自定義圖形的過程就是不斷地對path對象操作的過程。每當(dāng)開始一次新的圖形繪制任務(wù)
2、時，都需要先使用beginPath（）方法來重置path對象至初始狀態(tài)，這個簡單的函數(shù)不帶任何參數(shù)，它來通知canvas將要開始繪制一個新的圖形了。moveTo（X，Y）方法可以設(shè)置繪圖起始坐標(biāo)，lineTo（X，Y）等畫線方法可以從當(dāng)前起點繪制直線、圓弧，以及曲線到目標(biāo)位置。closePath（）方法將自定義圖形進(jìn)行閉合，該方法將自動創(chuàng)建一條從當(dāng)前坐標(biāo)到起始坐標(biāo)的直線。一旦確定完成，則需要繼續(xù)調(diào)用stroke（）和fill（）函數(shù)來完成將路徑渲染到畫面的最后一步。beginPath（）：開始一個新路徑moveTo（X，Y）：移動路徑的
3、繪圖起點標(biāo)準(zhǔn)文檔實用文案lineTo（X，Y）：從moveTo定義的點開始繪制連續(xù)的路徑，或者從上一次的lineTo的終點開始繪制。closePath（）：連接最后的點和最初的點并關(guān)閉路徑繪制。描邊樣式：lineWidth是指描邊的線條寬度lineJoin用來修飾當(dāng)前形狀中線段的連接方式，可以把它的值設(shè)置為round、bevel和miter3個選項。lineCap用來指定線條末端的樣式，可以把它設(shè)置為butt、square或roundmiterLimit用來設(shè)定外延交點與連接點的最大距離strokeStyle用來改變線條的顏色。標(biāo)準(zhǔn)文檔
4、實用文案繪制曲線：1、arc（X，Y，radius，startAngle，endAngle，anticlockwise）參數(shù)X和Y為圓心坐標(biāo)，r為半徑，startAngle為起始角度，endAngle為結(jié)束角度，anticlockwise為順時針還是逆時針。2、bezierCurveTo（cp1x，cp1y,cp2x,cp2y,x,y）cp1x為第一個控制點的橫坐標(biāo)，cp1y為第一個控制點的縱坐標(biāo)，cp2x為第二個控制點的橫坐標(biāo)，cp2y為第二個控制點的縱坐標(biāo)，x為貝濟埃曲線的終點橫坐標(biāo)，y為貝濟埃曲線的終點縱坐標(biāo)。3、quadrati
5、cCurveTo（cpX，cpY，x，y）cpX為控制點的橫坐標(biāo)，cpY為控制點的縱坐標(biāo)，x為曲線終點的橫坐標(biāo)，y為曲線終點的縱坐標(biāo)。標(biāo)準(zhǔn)文檔實用文案在canvas中插入圖像在drawImage（img，x，y）方法中，image是image或者canvas對象，x和y是其在目標(biāo)canvas中的起始坐標(biāo)。標(biāo)準(zhǔn)文檔實用文案繪制漸變圖像：在canvas繪圖中支持兩種類型的漸變：線性漸變和放射性漸變createLinearGradient（x0,y0,x1,y1）表示漸變的起點、終點createRadialGradient(x0,y0,r0,
6、x1,y1,r1)沿著兩個圓之間的錐面繪制漸變。該方法創(chuàng)建并返回一個新的CanvasGradient對象，該對象在兩個指定圓的圓周之間放射性的插入顏色，注意，這個方法并沒有指定任何用來漸變的顏色?？s放canvas對象使用scale（X，Y）比如X為2，就代表所繪制的圖像中全部元素都會變成兩倍寬。標(biāo)準(zhǔn)文檔實用文案translate這個方法用來指定新的原點坐標(biāo)，后續(xù)操作的坐標(biāo)值都是相對于新的原點坐標(biāo)來操作取值。若要恢復(fù)原點坐標(biāo)，可以使用restore（）方法。旋轉(zhuǎn)rotate（angle），angle為正數(shù)時，按順時針方向旋轉(zhuǎn)。Canvas
7、文本應(yīng)用：fillText（text，x，y，maxwidth）將對文本應(yīng)用填充式渲染strokeText（text，x，y，maxwidth）對文本進(jìn)行描邊渲染標(biāo)準(zhǔn)文檔實用文案shadowColor：陰影顏色shadowBlur:設(shè)置陰影模糊程度shadowOffsetX與shadowOffsetY：陰影的X和Y偏移量，單位是像素。像素處理：標(biāo)準(zhǔn)文檔實用文案標(biāo)準(zhǔn)文檔
