微信小程序 -- 畫布

wx.createCanvasContext(canvasID)

指定canvasID, 創(chuàng)建canvas繪圖的上下文

setFillStyle {#setfillstyle}

設(shè)置填充色

setStrokeStyle

設(shè)置邊框顏色

setShadow

設(shè)置陰影

offsetX 陰影相對于形狀在水平方向的偏移
offsetY 陰影相對于形狀在豎直方向的偏移
blur 陰影的模糊級別(取值范圍0-100)
color 陰影的顏色

createLinearCradient

創(chuàng)建一個線性的漸變顏色

使用addColorStop(),指定漸變點纺且,至少需要兩個漸變點

x0, y0, x1, y1分別代表起點的坐標剖煌, 終點的坐標

createCircularGradient

創(chuàng)建一個圓形的漸變顏色

起點在圓心吸申,終點在圓環(huán)

需要使用addColorStop(),來指定漸變點,至少需要兩個漸變點

x, y, r,分別代表圓心的坐標悯森,圓的半徑

addColorStop

創(chuàng)建一個顏色的漸變點

小于最小stop的部分會按照最小的stop的顏色來渲染,同樣,大于最大stop的部分會按照最大stop的color來渲染

stop表示漸變點在起點和終點中的位置诚纸,取值范圍是0-1

color表示漸變點的顏色

setLineWidth

設(shè)置線條的寬度

lineWidth 線條的寬度窜觉,單位是px

setLineCap

設(shè)置線條的端點樣式

lineCap 線條的結(jié)束端點樣式,取值范圍是butt, round, square

setLineJoin

設(shè)置線條的交點樣式

lineJoin 線條的結(jié)束的交點樣式 谷炸,取值范圍是 bevel, round, miter

setMiterLImit

設(shè)置最大斜接長度, 指的是在兩條線交匯處內(nèi)角和外角之間的距離

當setLineJoin()為miter時候禀挫,才有效

超過最大傾斜長度時候淑廊,連接處將以lineJoin為bevel來顯示

rect

創(chuàng)建一個矩形

需要使用fill(), stroke()方法將矩形真正的畫到canvas中

x, y, width, height分別表示矩形的左上角坐標, 矩形的寬度特咆,高度

fillRect

填充一個矩形季惩,參數(shù)同rect

strokeRect

畫一個矩形(非填充)參數(shù)同: rect

clearRect

清除畫布上該矩形區(qū)域內(nèi)的內(nèi)容,參數(shù)同rect

fill

對當前路徑中的內(nèi)容進行填充腻格,

如果當前路徑?jīng)]有閉合画拾,fil()方法會將起點和終點進行連接,然后填充

fill()填充的路徑是從beginPath()開始計算菜职,但是不會將fillRect()包含進去

stroke

畫出當前路徑的邊框

storke() 描繪的路徑是從beginPath()開始計算青抛,但是不會將fillRect()包含進去

beginPath

開始創(chuàng)建一個路徑,需要調(diào)用fill或者stroke才會使用路徑進行填充或者描邊

在最開始的時候相當于調(diào)用了一次 beginPath()

同一個路徑中多次setFillStyle() , setStrokeStyle(), setLineWidth()等設(shè)置酬核,以最后一次設(shè)置為準

closePath

關(guān)閉一個路徑

關(guān)閉路徑會連接起點和終點

如果關(guān)閉路徑后沒有調(diào)用fill() ,stroke()并開啟新的路徑蜜另, 之前的路徑不會被渲染

moveTo

把路徑移動到畫布中的指定點,不創(chuàng)建線條

x, y表示目標位置的x坐標嫡意,y坐標

lineTo

lineTo方法增加一個新點举瑰, 然后創(chuàng)建 一條從上次指定點到目標點的線

arc

畫一條弧線

創(chuàng)建一個圓可以用arc()方法指定起始弧度 為0, 終止弧度為 2*Math.PI

x, y, r 表示圓心的坐標蔬螟, r表示圓的半徑

sAngle 表示起始弧度此迅, eAngle表示終止弧度

counterclockwise 表示指定的弧度方向是逆時針還是順時針

bezierCurveTo

創(chuàng)建三次方貝塞爾曲線路徑

曲線的起始點為路徑中前一個點

cp1x, cp1y, cp2x, cp2y表示第一個,第二個貝塞爾控制點的坐標

x, y表示結(jié)束點的坐標

quadraticCurveTo

定義二次貝塞爾曲線路徑

曲線的起始點為路徑中前一個點

cpx, cpy, x, y分別表示貝塞爾控制點的坐標, 結(jié)束點的坐標

scale

調(diào)用scale方法耸序,創(chuàng)建的路徑坐標會被縮放

調(diào)用scale方法后忍些, 之后創(chuàng)建的路徑的坐標也會被縮放

scaleWidth, scaleHeight橫縱坐標縮放的倍數(shù)

rotate

以原點為中心, 順時針旋轉(zhuǎn)當前坐標軸

多次調(diào)用rotate坎怪, 旋轉(zhuǎn)的角度會疊加

原點可以使用translate方法修改

rotate 旋轉(zhuǎn)角度罢坝,角度使用弧度計數(shù)(degrees * Math.PI/180 , degrees范圍是0~360)

translate

對當前坐標系的原點(0,0)進行變換, 默認的坐標系原點為頁面左上角

x,y表示水平坐標平移量搅窿, 豎直坐標平移量

setFonSize

設(shè)置字體的字號

fontSize表示字體的字號

fillText

在畫布上繪制被填充的文本

text表示在畫布上輸出的文本嘁酿,

x, y表示繪制文本的左上角x的坐標位置

drawImage

繪制圖像,圖像保持原始尺寸

imageResource 表示繪制的圖片資源

x, y, width, height表示圖像左上角坐標戈钢, 圖像寬度和圖像高度

setGlobalAlpha

設(shè)置全局畫筆透明度

alpha 透明度痹仙,數(shù)值為0~1

save

保存當前的繪圖上下文

restore

恢復(fù)之前保存的繪圖上下文

draw

將之前在繪圖上下文中的描述(路徑,變形殉了,樣式)畫到canvas中

繪圖上下文需要由wx.createCanvasContext(canvasID)來創(chuàng)建

reserve开仰, 表示是否接著上一次繪制,選值為true, false

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末薪铜,一起剝皮案震驚了整個濱河市众弓,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌隔箍,老刑警劉巖谓娃,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異蜒滩,居然都是意外死亡滨达,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進店門俯艰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來捡遍,“玉大人,你說我怎么就攤上這事竹握』辏” “怎么了?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵啦辐,是天一觀的道長谓传。 經(jīng)常有香客問我耕驰,道長烙无,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任奸腺,我火速辦了婚禮充边,結(jié)果婚禮上庸推,老公的妹妹穿的比我還像新娘常侦。我一直安慰自己浇冰,他們只是感情好贬媒,可當我...
    茶點故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著肘习,像睡著了一般际乘。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上漂佩,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天脖含,我揣著相機與錄音,去河邊找鬼投蝉。 笑死养葵,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的瘩缆。 我是一名探鬼主播关拒,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼庸娱!你這毒婦竟也來了着绊?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤熟尉,失蹤者是張志新(化名)和其女友劉穎归露,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體斤儿,經(jīng)...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡剧包,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了往果。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片疆液。...
    茶點故事閱讀 38,617評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖棚放,靈堂內(nèi)的尸體忽然破棺而出枚粘,到底是詐尸還是另有隱情,我是刑警寧澤飘蚯,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布馍迄,位于F島的核電站,受9級特大地震影響局骤,放射性物質(zhì)發(fā)生泄漏攀圈。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一峦甩、第九天 我趴在偏房一處隱蔽的房頂上張望赘来。 院中可真熱鬧现喳,春花似錦、人聲如沸犬辰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽幌缝。三九已至灸促,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間涵卵,已是汗流浹背浴栽。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留轿偎,地道東北人典鸡。 一個月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像坏晦,于是被迫代替她去往敵國和親萝玷。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,486評論 2 348

推薦閱讀更多精彩內(nèi)容

  • --繪圖與濾鏡全面解析 概述 在iOS中可以很容易的開發(fā)出絢麗的界面效果英遭,一方面得益于成功系統(tǒng)的設(shè)計间护,另一方面得益...
    韓七夏閱讀 2,715評論 2 10
  • 一:canvas簡介 1.1什么是canvas? ①:canvas是HTML5提供的一種新標簽 ②:HTML5 ...
    GreenHand1閱讀 4,674評論 2 32
  • 一挖诸、簡介 HTML5 中的定義:“它是依賴分辨率的位圖畫布汁尺,你可以在 canvas 上面繪制任何圖形,甚至加載照片...
    destiny0904閱讀 10,521評論 1 4
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理多律,服務(wù)發(fā)現(xiàn)痴突,斷路器,智...
    卡卡羅2017閱讀 134,629評論 18 139
  • 文/柯臨 過年進入倒計時,這是一年中幸福期待值最高的時刻相味,甚至超過進行式的春節(jié)拾积。 打明兒開始,大伙兒難免與從各個角...
    臨公子的后花園閱讀 481評論 0 8