本文主要介紹html5畫板(html5畫布繪圖)，下面一起看看html5畫板(html5畫布繪圖)相關(guān)資訊。
畫布可以畫出許多奇妙的圖案和美麗的效果。通過幾個(gè)簡單的api，就可以在畫布上顯示出千變?nèi)f化的效果，還可以制作網(wǎng)頁游戲。接下來總結(jié)一下繪圖相關(guān)的api。畫畫的時(shí)候，畫布相當(dāng)于畫布，背景相當(dāng)于畫筆。1。畫線moveto(x0，y0):設(shè)置當(dāng)前畫筆(ictx)的位置(x0，y0)。lineto(x1，y1):從當(dāng)前位置畫一條直線(x0，y0)到(x1，y1)。beginpath:打開一個(gè)路徑或重置當(dāng)前路徑。closepath:到目前為止，這是返回起點(diǎn)的路徑，最后一次調(diào)用位置，回避和路徑。stroke:繪畫。你要加這個(gè)功能才能畫圖，所以這個(gè)一定要放在最后。反應(yīng)性icavas =文檔。getelementbyid(ica vas)；var ictx = ican vas . get context(2d)；ictx . begin path；ictx.moveto(0，0)；ictx . line to(300150)；(3150)ictx . line to；ictx . close path；ictx . stroke；需要注意的是，如果將closepath放在stroke函數(shù)中，就不會(huì)畫成閉合線，因?yàn)橹耙呀?jīng)結(jié)束了，所以不能畫左邊的直線。2。線性線帽:線端樣式、對(duì)接、圓形、方形。linejoin:當(dāng)兩條線以拐點(diǎn)模式相交時(shí)，可以設(shè)置的最大長度在人字形的時(shí)間拐點(diǎn)處。u 3000 u 3000 u 3000 u 3000 u 3000 u 3000 u 3000 u 3000 u 3000 u 3000 u 3000 u 3000 miterlimit:如果斜接長度超過miter limit值，角部將顯示連線傘。線寬:線寬strokestyle:線條顏色、漸變(定義漸變對(duì)象)和圖案。語境。strokestyle = # 333反應(yīng)性icavas =文檔。getelementbyid(ica vas)；var ictx = ican vas . get context(2d)；ictx . begin path；ictx .strokestyle = # 0000ffictx .線寬= 20；ictx .線帽=圓；ictx.moveto(10，10);ictx . line to(80)；ictx . stroke；(ictx .打)；//這里一定要調(diào)用，不然就是上一節(jié)第一次。在筆畫的基礎(chǔ)上再畫一條黑線，共計(jì)3。ictx .strokestyle = # 000000ictx .線帽=對(duì)接接頭；ictx .線寬= 10；ictx.moveto(80，10)；ictx.lineto(10，80)；ictx . stroke；創(chuàng)建一個(gè)路徑，closepaths成對(duì)出現(xiàn)，幾乎不用管兩者之間的閉合路徑，closepaths用來閉合的起點(diǎn)和終點(diǎn)。3.繪制曲線(x，y，圓弧半徑，起始角，結(jié)束角，逆時(shí)針):繪制曲線，曲線半徑，半徑起始角，結(jié)束角，起始角和結(jié)束角，使用電弧(數(shù)學(xué)。π/ 180)*通過半徑和方向的角度值。北極(x1，y1，x2，y2，半徑):繪制曲線的前兩條切線。ictx . begin path；ictx.moveto(20，20)；//創(chuàng)建一個(gè)起點(diǎn)ictx。lineto (100，20)；//創(chuàng)建水平線ictx.arcto(15020150，70，50)//創(chuàng)建圓??；ictx . line to(150120)；//創(chuàng)建豎線ictx . stroke；繪制曲線的起點(diǎn)和水平線的終點(diǎn)與第一個(gè)點(diǎn)的連接點(diǎn)相切。曲線的終點(diǎn)和第一個(gè)設(shè)定點(diǎn)與第二個(gè)點(diǎn)的連接點(diǎn)的切線，u3000 u3000 quadraticcurveto(x1，y1，x2，y2):兩條貝塞爾曲線。(x1，y1)的控制點(diǎn)坐標(biāo)，(x2，y2) beziercurveto(x1，y1，x2，y2，x，y)的最后一點(diǎn)坐標(biāo):三條貝塞爾曲線。(x1，y1)的控制點(diǎn)1的坐標(biāo)和(x2，y2)的控制點(diǎn)2的坐標(biāo)系在終點(diǎn)。貝塞爾曲線在繪制一些非常平滑的曲線時(shí)非常有用。4。畫一個(gè)矩形并填充它:創(chuàng)建一個(gè)矩形；使用(x，y，width，height):繪制填充有:(x，y)矩形起點(diǎn)，寬度，高度的矩形width strokerect:繪制矩形線框clearrect:刪除矩形。ictx .fillstyle = # 0000ff//設(shè)置填充顏色(2020150100)ictx . fill rect；；(18020100100)ictx . strokerect；5。刷子屬性填充顏色:設(shè)置填充顏色、漸變或模式(mode)；strokestyle:顏色、漸變、圖案或畫筆6。畫一個(gè)陰影顏色:shadowyanse shadowblur:模糊等級(jí)shadowoffsetx:陰影shadowoffset的水平距離:陰影的垂直距離ictx shadowblur = 20；ictx .shadowcolor = # 456ictx .shadowoffsetx =-10；ictx.shadowoffsety = 30/ /首先設(shè)置你畫的矩形ictx的陰影.fillstyle = # 108997ictx.fillrect(2020100，80)；ictx . stroke；7。逐步改變createlanegradient(x1，y1，x2，y2):畫一個(gè)線性漸變，(x1，y1)是漸變的起點(diǎn)。(x2，y2)是漸變的終點(diǎn)，不同的位置可以水平或垂直漸變。createaradialgradient(x1，y1，y2，x2，r1，r2):徑向漸變:(x1，y1)是漸變的起點(diǎn)，r1是半徑，(x2，y1)是漸變的終點(diǎn)，終點(diǎn)是半徑。這兩種梯度都需要使用。addcolorstop設(shè)置漸變過程，停止點(diǎn)是一個(gè)從0到1的值。var grd = ictx . createlanegradient(00170，0)；grd.addcolorstop(0，# 000)；grd.addcolorstop(0.5，# 378923)；grd.addcolorstop(1，# ddd)；ictx .fill style = grd；//這個(gè)漸變用來傳遞填充顏色(2020150100)ictx . fill rect；值對(duì)象的；var grd = ictx . createradialgradient(30022515250225100)；grd.addcolorstop(0，# 345)；grd.addcolorstop(1，# fff)；ictx .fill style = grd；(200150150100)ictx . fill rect；8。填充背景createpattern(圖像，重復(fù)|重復(fù)-x |垂直重復(fù)|無重復(fù))):圖像是圖片對(duì)象，是下面參數(shù)屏的重復(fù)。9。其他相關(guān)api population:填充當(dāng)前路徑。ispointinpath:ictx . ispointinpath(x，y)；判斷此點(diǎn)是否在當(dāng)前路徑的方法:清除畫布上的油畫，icanvas.height，width i canvas。寬度；然后使用clear rect；修改畫布的寬度。寬度= 200;icanvas寬度= 300美元的方法。globalalpha:是透明的，只能是一些0 ~ 1。如果透明度不同，可以在繪制前重新設(shè)置。今天:伊卡薩。toda aurl(type，encoderoptions)。這個(gè)函數(shù)返回一個(gè)base64 uri圖像。該參數(shù)是可選的?？梢栽O(shè)置圖像類型如image/jpeg image/webp，默認(rèn)為image/format。encoderoptions為0 ~ 1，用于設(shè)置圖像jpeg、image/webp圖像質(zhì)量。為其他格式類型設(shè)置此參數(shù)無效。10。裁剪鉗:從畫布上裁剪出一種任意形狀和大小的畫布，然后將所有繪圖限定在裁剪區(qū)域內(nèi)。這種方法通常用于繪制矩形、圓形和其他路徑。在這些方法之后，圖像被剪切，然后它必須被繪制在剪切的畫布上。ictx.arc(100100，50，(數(shù)學(xué)。π/ 180)* 0(數(shù)學(xué)。π/ 180)* 360，真的)；ictx . stroke；ictx . clip；ictx .fillstyle =綠色；(00150100)ictx . fill rect；如果要對(duì)外部畫布進(jìn)行操作，在剪切前保存其函數(shù)，剪切后再使用restore函數(shù)恢復(fù)到之前保存的狀態(tài)，但中間操作不會(huì)消失。以上是本文的全部內(nèi)容，希望能對(duì)你有所幫助，也希望你多多支持。
了解更多html5畫板(html5畫布繪圖)相關(guān)內(nèi)容請(qǐng)關(guān)注本站點(diǎn)。