分析JavaScriptHTMLDOMCanvas對象-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、剛察網(wǎng)站定制設(shè)計、自適應(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)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為剛察等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

Canvas 對象

Canvas對象表示HTML5 <canvas>元素。

您可以使用getElementById()訪問<canvas>元素：

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

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

顏色樣式和陰影

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

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

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

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

線條樣式

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

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

矩形

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

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

畫布路徑

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

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

畫布轉(zhuǎn)換

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

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

畫布文本

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

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

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

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

圖像繪制

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

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

像素操作

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

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

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

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

畫布合成

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

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

HTML參考： HTML5 畫布

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

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

文章名稱：分析JavaScriptHTMLDOMCanvas對象-創(chuàng)新互聯(lián)
URL鏈接：http://muchs.cn/article32/dodssc.html

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

廣告

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