本篇內(nèi)容主要講解“分析JavaScript HTML DOM Canvas對(duì)象”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“分析JavaScript HTML DOM Canvas對(duì)象”吧!

成都創(chuàng)新互聯(lián)專(zhuān)注于企業(yè)營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站重做改版、剛察網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、電子商務(wù)商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性?xún)r(jià)比高，為剛察等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

Canvas 對(duì)象

Canvas對(duì)象表示HTML5 <canvas>元素。

您可以使用getElementById()訪(fǎng)問(wèn)<canvas>元素：

var x = document.getElementById("myCanvas");

注意： <canvas>元素沒(méi)有自己的繪圖功能（它只是圖形的容器） - 您必須使用腳本來(lái)實(shí)際繪制圖形。getContext()方法返回一個(gè)對(duì)象，該對(duì)象提供在畫(huà)布上繪制的方法和屬性。此參考將介紹getContext（“2d”）對(duì)象的屬性和方法，可用于在畫(huà)布上繪制文本，線(xiàn)條，框，圓等。

顏色樣式和陰影

下表是畫(huà)布顏色樣式和陰影相關(guān)的屬性 ：

屬性	描述
fillStyle	設(shè)置或返回用于填充繪圖的顏色、漸變或圖案
strokeStyle	設(shè)置或返回用于筆畫(huà)的顏色、漸變或圖案
shadowColor	設(shè)置或返回用于陰影的顏色
shadowBlur	設(shè)置或返回陰影的模糊級(jí)別
shadowOffsetX	設(shè)置或返回陰影與形狀的水平距離
shadowOffsetY	設(shè)置或返回陰影與形狀的垂直距離

下表是畫(huà)布顏色樣式和陰影相關(guān)的方法 ：

方法	描述
createLinearGradient()	創(chuàng)建一個(gè)線(xiàn)性漸變(用于畫(huà)布內(nèi)容)
createPattern()	按指定的方向重復(fù)指定的元素
createRadialGradient()	創(chuàng)建一個(gè)徑向/圓形漸變(用于畫(huà)布內(nèi)容)
addColorStop()

線(xiàn)條樣式

下表是線(xiàn)條相關(guān)的屬性 ：

屬性	描述
lineCap	設(shè)置或返回一行的結(jié)束大寫(xiě)字母的樣式
lineJoin	設(shè)置或返回創(chuàng)建的角的類(lèi)型，當(dāng)兩行相交時(shí)
lineWidth	設(shè)置或返回當(dāng)前行寬度
miterLimit	設(shè)置或返回大斜接長(zhǎng)度

矩形

下表是矩形相關(guān)的方法 ：

方法	描述
rect()	創(chuàng)建一個(gè)矩形
fillRect()	繪制一個(gè)“填充”矩形
strokeRect()	繪制矩形(無(wú)填充)
clearRect()	清除給定矩形內(nèi)的指定像素

畫(huà)布路徑

下表是畫(huà)布路徑相關(guān)的方法 ：

方法	描述
fill()	填充當(dāng)前繪圖(路徑)
stroke()	畫(huà)出你定義的路徑
beginPath()	開(kāi)始一個(gè)路徑，或重置當(dāng)前路徑
moveTo()	將路徑移動(dòng)到畫(huà)布中的指定點(diǎn)，而不創(chuàng)建一條線(xiàn)
closePath()	創(chuàng)建從當(dāng)前點(diǎn)到起點(diǎn)的路徑
lineTo()	從畫(huà)布中最后指定的點(diǎn)添加一個(gè)新點(diǎn)并在該點(diǎn)上創(chuàng)建一條線(xiàn)
clip()	從原始畫(huà)布上剪輯任何形狀和大小的區(qū)域
quadraticCurveTo()	創(chuàng)建一個(gè)二次貝塞爾曲線(xiàn)
bezierCurveTo()	創(chuàng)建一個(gè)立方貝塞爾曲線(xiàn)
arc()	創(chuàng)建圓弧/曲線(xiàn)(用于創(chuàng)建圓或圓的一部分)
arcTo()	在兩個(gè)切線(xiàn)之間創(chuàng)建一個(gè)弧/曲線(xiàn)
isPointInPath()	如果指定點(diǎn)在當(dāng)前路徑中，則返回true，否則為false

畫(huà)布轉(zhuǎn)換

下表是轉(zhuǎn)換相關(guān)的方法 ：

方法	描述
scale()	按比例縮放當(dāng)前繪制的圖形或大或小
rotate()	旋轉(zhuǎn)當(dāng)前繪圖
translate()	在畫(huà)布上從(0,0)位置重新繪制
transform()	替換當(dāng)前繪圖的變換矩陣
setTransform()	將當(dāng)前變換重置為單位矩陣。然后運(yùn)行transform()

畫(huà)布文本

下表是畫(huà)布文本相關(guān)的屬性 ：

屬性	描述
font	設(shè)置或返回文本內(nèi)容的當(dāng)前字體屬性
textAlign	設(shè)置或返回文本內(nèi)容的當(dāng)前對(duì)齊方式
textBaseline	設(shè)置或返回繪制文本時(shí)使用的當(dāng)前文本基線(xiàn)

下表是畫(huà)布文本相關(guān)的方法 ：

方法	描述
fillText()	在畫(huà)布上繪制“填充”文本
strokeText()	在畫(huà)布上繪制文本(無(wú)填充)
measureText()	返回一個(gè)包含指定文本寬度的對(duì)象

圖像繪制

下表是畫(huà)布圖像繪制相關(guān)的方法 ：

方法	描述
drawImage()	在畫(huà)布上繪制圖像、畫(huà)布或視頻

像素操作

下表是畫(huà)布像素操作相關(guān)的屬性 ：

屬性	描述
width	返回ImageData對(duì)象的寬度
height	返回ImageData對(duì)象的高度
data	返回包含指定ImageData對(duì)象的圖像數(shù)據(jù)的對(duì)象

下表是畫(huà)布像素操作相關(guān)的方法 ：

屬性	方法
createImageData()	創(chuàng)建一個(gè)新的空白ImageData對(duì)象
getImageData()	返回一個(gè)ImageData對(duì)象，該對(duì)象復(fù)制畫(huà)布上指定矩形的像素?cái)?shù)據(jù)
putImageData()	將圖像數(shù)據(jù)(來(lái)自指定的ImageData對(duì)象)放回畫(huà)布

畫(huà)布合成

下表是畫(huà)布合成相關(guān)的屬性 ：

屬性	描述
globalAlpha	設(shè)置或返回繪圖的當(dāng)前alpha或透明度值
globalCompositeOperation	設(shè)置或返回如何將新映像繪制到現(xiàn)有映像上

HTML參考： HTML5 畫(huà)布

HTML參考： HTML <canvas>標(biāo)簽

到此，相信大家對(duì)“分析JavaScript HTML DOM Canvas對(duì)象”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！

文章名稱(chēng)：分析JavaScriptHTMLDOMCanvas對(duì)象-創(chuàng)新互聯(lián)
URL鏈接：http://www.chinadenli.net/article32/dodssc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、小程序開(kāi)發(fā)、網(wǎng)站制作、網(wǎng)站內(nèi)鏈、外貿(mào)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)