小程序canvas生成圖片踩坑日記

  • CanvasContext.beginPath()
    官方描述:
  1. 在最開始的時候相當于調用了一次 beginPath。
  2. 同一個路徑內的多次 setFillStyle、setStrokeStyle议惰、setLineWidth等設置,以最后一次設置為準待错。
    意思就是每一個setFillStyle褐澎、setStrokeStyle会钝、setLineWidth前面都要加CanvasContext.beginPath(),不然的話就會踩坑
  • CanvasContext.save()和CanvasContext.restore()
    save表示保存save函數(shù)之前的狀態(tài)工三,restore表示獲取save保存的狀態(tài)
const ctx = wx.createCanvasContext('canvas')
ctx.save()  //save保存了上文的狀態(tài)
ctx.setFillStyle('red') 
ctx.scale(2, 2)
ctx.fillRect(10, 10, 150, 100)  // 該矩形是紅色的
ctx.restore() //restore獲取了save保存的狀態(tài)迁酸,所以此時填充的顏色是黑色并不是紅色,scale方法也僅僅對紅色矩形生效俭正,并不會對黑色矩形起任何效果
ctx.fillRect(50, 50, 150, 100)  // 該矩形是黑色的
ctx.draw()
  • wx.canvasToTempFilePath()
    必須在CanvasContext.draw()的回調里調用該方法才能保證導出圖片成功
  • CanvasContext.rect()和CanvasContext.fillRect()
  1. CanvasContext.fillRect()是填充一個矩形奸鬓,簡言之就是給矩形添加顏色
  2. CanvasContext.rect()創(chuàng)建一個矩形路徑
    如果只是需要給矩形添加背景顏色則使用CanvasContext.fillRect()方法,CanvasContext.rect()會遮蓋元素掸读。
  • CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)
  1. number x表示圓心的 x 坐標
  2. number y表示圓心的 y坐標
  3. number r表示圓的半徑
  4. number sAngle表示起始弧度串远,單位弧度(在3點鐘方向)
  5. number eAngle表示終止弧度
  6. boolean counterclockwise表示弧度的方向是否是逆時針
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末宏多,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子澡罚,更是在濱河造成了極大的恐慌伸但,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件留搔,死亡現(xiàn)場離奇詭異更胖,居然都是意外死亡,警方通過查閱死者的電腦和手機隔显,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門却妨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人括眠,你說我怎么就攤上這事管呵。” “怎么了哺窄?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長账锹。 經(jīng)常有香客問我萌业,道長,這世上最難降的妖魔是什么奸柬? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任生年,我火速辦了婚禮,結果婚禮上廓奕,老公的妹妹穿的比我還像新娘抱婉。我一直安慰自己,他們只是感情好桌粉,可當我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布蒸绩。 她就那樣靜靜地躺著,像睡著了一般铃肯。 火紅的嫁衣襯著肌膚如雪患亿。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天押逼,我揣著相機與錄音步藕,去河邊找鬼。 笑死挑格,一個胖子當著我的面吹牛咙冗,可吹牛的內容都是我干的。 我是一名探鬼主播漂彤,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼雾消,長吁一口氣:“原來是場噩夢啊……” “哼灾搏!你這毒婦竟也來了?” 一聲冷哼從身側響起仪或,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤确镊,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后范删,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蕾域,經(jīng)...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年到旦,在試婚紗的時候發(fā)現(xiàn)自己被綠了旨巷。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡添忘,死狀恐怖采呐,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情搁骑,我是刑警寧澤斧吐,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站仲器,受9級特大地震影響煤率,放射性物質發(fā)生泄漏。R本人自食惡果不足惜乏冀,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一蝶糯、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧辆沦,春花似錦昼捍、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至鹃彻,卻和暖如春郊闯,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蛛株。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工团赁, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人谨履。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓欢摄,卻偏偏與公主長得像,于是被迫代替她去往敵國和親笋粟。 傳聞我的和親對象是個殘疾皇子怀挠,可洞房花燭夜當晚...
    茶點故事閱讀 43,627評論 2 350

推薦閱讀更多精彩內容

  • 因為微信小程序暫時沒有分享到朋友圈的功能析蝴,所以只能生成分享圖,然后再發(fā)到朋友圈绿淋,這就用到了canvas闷畸!剛開始寫的...
    小新子666閱讀 1,872評論 0 2
  • 驗證瀏覽器是否支持 Your browser does not support HTML5 Canvas. f...
    shuaiutopia閱讀 2,626評論 0 0
  • 一、簡介 HTML5 中的定義:“它是依賴分辨率的位圖畫布吞滞,你可以在 canvas 上面繪制任何圖形佑菩,甚至加載照片...
    destiny0904閱讀 10,524評論 1 4
  • 第一章 HTML5 (2014年10月29日發(fā)布)新特性: 10個 (1)新的語義標簽 (2)增強型表單 (3)視...
    fastwe閱讀 948評論 0 1
  • 繪圖 簡介 API context 對象的方法列表 顏色,樣式裁赠,陰影 漸變 線條樣式 矩形 路徑 變形 文字 圖片...
    勇敢的_心_閱讀 5,166評論 0 4