《canvas標(biāo)簽介紹》PPT課件

《《canvas標(biāo)簽介紹》PPT課件》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、重要的Canvas標(biāo)簽主講：叢浩@LAMP兄弟連叢浩conghao@lampbrother.netCanvas的使用您的瀏覽器不支持canvas標(biāo)簽canvas標(biāo)簽在頁(yè)面中只顯示一個(gè)設(shè)定背景色的畫(huà)布，如果要產(chǎn)生新內(nèi)容或者進(jìn)行畫(huà)圖操作，需要借助canvasAPI(HTML5的內(nèi)置對(duì)context對(duì)象)和javascript操作實(shí)現(xiàn)畫(huà)圖或者其他圖像操作canva

2、s的常見(jiàn)屬性屬性值描述heightpixels設(shè)置canvas的高度。widthpixels設(shè)置canvas的寬度。Canvas的APIcanvas主要屬性和方法方法描述save()保存當(dāng)前環(huán)境的狀態(tài)restore()返回之前保存過(guò)的路徑狀態(tài)和屬性createEvent()getContext()返回一個(gè)對(duì)象，指出訪問(wèn)繪圖功能必要的APItoDataURL()返回canvas圖像的URLCanvas的API顏色、樣式和陰影屬性和方法屬性描述fillStyle設(shè)置或返回用于填充繪畫(huà)的顏色、漸變或模式strokeStyle設(shè)置或返回用于筆觸的顏色、漸變或模式shadowColo

3、r設(shè)置或返回用于陰影的顏色shadowBlur設(shè)置或返回用于陰影的模糊級(jí)別shadowOffsetX設(shè)置或返回陰影距形狀的水平距離shadowOffsetY設(shè)置或返回陰影距形狀的垂直距離方法描述createLinearGradient()創(chuàng)建線性漸變（用在畫(huà)布內(nèi)容上）createPattern()在指定的方向上重復(fù)指定的元素createRadialGradient()創(chuàng)建放射狀/環(huán)形的漸變（用在畫(huà)布內(nèi)容上）addColorStop()規(guī)定漸變對(duì)象中的顏色和停止位置Canvas的API線條樣式屬性和方法屬性描述lineCap設(shè)置或返回線條的結(jié)束端點(diǎn)樣式lineJoin設(shè)置或返

4、回兩條線相交時(shí)，所創(chuàng)建的拐角類(lèi)型lineWidth設(shè)置或返回當(dāng)前的線條寬度miterLimit設(shè)置或返回最大斜接長(zhǎng)度Canvas的API矩形方法方法描述rect()創(chuàng)建矩形fillRect()繪制"被填充"的矩形strokeRect()繪制矩形（無(wú)填充）clearRect()在給定的矩形內(nèi)清除指定的像素Canvas的API-路徑方法方法描述fill()填充當(dāng)前繪圖（路徑）stroke()繪制已定義的路徑beginPath()起始一條路徑，或重置當(dāng)前路徑moveTo()把路徑移動(dòng)到畫(huà)布中的指定點(diǎn)，不創(chuàng)建線條closePath()創(chuàng)建從當(dāng)前點(diǎn)回到起始點(diǎn)的路徑lineTo()添加

5、一個(gè)新點(diǎn)，創(chuàng)建從該點(diǎn)到最后指定點(diǎn)的線條clip()從原始畫(huà)布剪切任意形狀和尺寸的區(qū)域quadraticCurveTo()創(chuàng)建二次貝塞爾曲線bezierCurveTo()創(chuàng)建三次方貝塞爾曲線arc()創(chuàng)建弧/曲線（用于創(chuàng)建圓形或部分圓）arcTo()創(chuàng)建兩切線之間的弧/曲線isPointInPath()如果指定的點(diǎn)位于當(dāng)前路徑中，返回布爾值Canvas的API-轉(zhuǎn)換方法方法描述scale()縮放當(dāng)前繪圖至更大或更小rotate()旋轉(zhuǎn)當(dāng)前繪圖translate()重新映射畫(huà)布上的(0,0)位置transform()替換繪圖的當(dāng)前轉(zhuǎn)換矩陣setTransform()將當(dāng)前轉(zhuǎn)換重

6、置為單位矩陣。然后運(yùn)行transform()Canvas的API-文本屬性和方法屬性描述font設(shè)置或返回文本內(nèi)容的當(dāng)前字體屬性textAlign設(shè)置或返回文本內(nèi)容的當(dāng)前對(duì)齊方式textBaseline設(shè)置或返回在繪制文本時(shí)使用的當(dāng)前文本基線方法描述fillText()在畫(huà)布上繪制"被填充的"文本strokeText()在畫(huà)布上繪制文本（無(wú)填充）measureText()返回包含指定文本寬度的對(duì)象Canvas的API-圖像繪制方法方法描述drawImage()向畫(huà)布上繪制圖像、畫(huà)布或視頻chrome不支持Canvas的API-像素操作方法和屬性屬性描述width返回Imag

7、eData對(duì)象的寬度height返回ImageData對(duì)象的高度data返回一個(gè)對(duì)象，其包含指定的ImageData對(duì)象的圖像數(shù)據(jù)方法描述createImageData()創(chuàng)建新的、空白的ImageData對(duì)象getImageData()返回ImageData對(duì)象，該對(duì)象為畫(huà)布上指定的矩形復(fù)制像素?cái)?shù)據(jù)putImageData()把圖像數(shù)據(jù)（從指定的ImageData對(duì)象）放回畫(huà)布上Canvas的API圖像合成屬性屬性描述globalAlpha設(shè)置或返回繪圖的當(dāng)前alpha或透明值globalCompositeOpe