因為微信小程序暫時沒有分享到朋友圈的功能，所以只能生成分享圖，然后再發(fā)到朋友圈，這就用到了canvas！剛開始寫的時候是各種查各種百度，然后也算寫了出來，但是現(xiàn)在也覺得不是很明白，就先從用到的API開始整理吧！
canvas畫布組件
canvas 標(biāo)簽?zāi)J(rèn)寬度300px、高度225px
canvas 是在一個二維的網(wǎng)格當(dāng)中,左上角的坐標(biāo)為(0, 0)。
屬性名 類型 默認(rèn)值 說明
canvas-id String canvas 組件的唯一標(biāo)識符
disable-scroll Boolean false 當(dāng)在 canvas 中移動時且有綁定手勢事件時，禁止屏幕滾動以及下拉刷新
bindtouchstart EventHandle 手指觸摸動作開始
bindtouchmove EventHandle 手指觸摸后移動
bindtouchend EventHandle 手指觸摸動作結(jié)束
bindtouchcancel EventHandle 手指觸摸動作被打斷，如來電提醒，彈窗
bindlongtap EventHandle 手指長按 500ms 之后觸發(fā)，觸發(fā)了長按事件后進(jìn)行移動不會觸發(fā)屏幕的滾動
binderror EventHandle 當(dāng)發(fā)生錯誤時觸發(fā) error 事件，detail = {errMsg: 'something wrong'}
在.wxml文件中
<canvas canvas-id="firstCanvas"></canvas>
在.js文件中
Page({
onReady: function (e) {
// 使用 wx.createContext 獲取繪圖上下文 context
var context = wx.createCanvasContext('firstCanvas')
}
})
當(dāng)頁面過長的時候，畫出了canvas之后禁止canva滑動設(shè)置屬性disable-scroll='true'是能禁止canvas滑動，但是不能禁止頁面滑動，如果你的canvas大小沒有頁面大的話，還是會觸摸滑動頁面的。
<canvas canvas-id="firstCanvas" disable-scroll='true'></canvas>
繪圖API
有好多也就不一一列舉了就說一些常用的吧
-
setFontSize：設(shè)置字體的字號
context.setFontSize(number)
context.font = '40px Arial' // 基礎(chǔ)庫 1.9.90 起支持 -
fillText：在畫布上繪制被填充的文本
context.fillText(string text, number x, number y, number maxWidth)
text:在畫布上輸出的文本; x:繪制文本的左上角x坐標(biāo)位置; y:繪制文本的左上角 y 坐標(biāo)位置; maxWidth:需要繪制的最大寬度，可選. -
setTextAlign：設(shè)置文字的對齊
content.setTextAlign(string align)
string align的值：left; center; right
運用：讓文字在畫布居中顯示
context.setFontSize(20)
context.setFillStyle('#fff')
context.setTextAlign('center');
context.fillText('Hello',mobileWidth / 2, 20)
context.draw()
setFillStyle：設(shè)置填充色
context.setFillStyle(color)
context.fillStyle = color // 基礎(chǔ)庫 1.9.90 起支持fill：對當(dāng)前路徑中的內(nèi)容進(jìn)行填充。默認(rèn)的填充色為黑色
context.fill()rect：創(chuàng)建一個矩形
context.rect(矩形路徑左上角的x坐標(biāo), 矩形路徑左上角的y坐標(biāo), width, height)
運用：
context.rect(10, 10, 150, 75)
context.setFillStyle('red')
context.fill()
context.draw()
-
fillRect：填充一個矩形
context.fillRect(矩形路徑左上角的x坐標(biāo), 矩形路徑左上角的y坐標(biāo), width, height)
運用：
context.setFillStyle('red')
context.fillRect(10, 10, 150, 75)
context.draw()
-
setStrokeStyle：設(shè)置描邊顏色。
context.setStrokeStyle(color) // 從基礎(chǔ)庫 1.9.90 開始，本接口停止維護(hù)
context.setStrokeStyle='color' // 基礎(chǔ)庫 1.9.90 起支持 -
strokeRect：畫一個矩形(非填充)
context.strokeRect(矩形路徑左上角的x坐標(biāo), 矩形路徑左上角的y坐標(biāo), width, height)
運用：
context.setStrokeStyle('red')
context.strokeRect(10, 10, 150, 75)
context.draw()
-
clearRect：清除畫布上該矩形區(qū)域內(nèi)的內(nèi)容
context.clearRect(矩形路徑左上角的x坐標(biāo), 矩形路徑左上角的y坐標(biāo), width, height) -
stroke：畫出當(dāng)前路徑的邊框。默認(rèn)顏色為黑色
context.stroke() -
beginPath：開始創(chuàng)建一個路徑，需要調(diào)用fill或者sroke才會使用路徑進(jìn)行填充或描邊
context.beginPath() -
closePath：關(guān)閉一個路徑，關(guān)閉路徑會鏈接起點和終點
context.closePath() -
moveTo：把路徑移動到畫布的指定點，不創(chuàng)建線條
context.moveTo(目標(biāo)位置的x坐標(biāo)，目標(biāo)位置的y坐標(biāo)) -
lineTo：方法增加一個新點，然后創(chuàng)建一條從上次指定點到目標(biāo)點的線
context.lineTo(目標(biāo)位置的x坐標(biāo)，目標(biāo)位置的y坐標(biāo))
運用：
context.moveTo(10,10)
context.rect(10,10,100,50)
context.lineTo(110,60)
context.stroke()
context.draw()
moveTo和lineTo用stroke()方法來畫線條
-
translate 對當(dāng)前坐標(biāo)系的原點(0, 0)進(jìn)行變換，默認(rèn)的坐標(biāo)系原點為頁面左上角
context.translate(水平坐標(biāo)平移量，豎直坐標(biāo)平移量) -
arc： 畫一條弧線，創(chuàng)建一個圓可以用arc()方法指定起始弧度為0，終止弧度為2*Math.PI
context.arc(x,y,r,sAngle,eAngle,counterclockwise)
x：圓的x坐標(biāo)；y：圓的y坐標(biāo)；r：圓的半徑；sAngle：起始弧度，單位弧度（在3點鐘方向）
eAngle：終止弧度；counterclockwise:指定弧度的方向是逆時針還是順時針。Boolean類型，默認(rèn)是false即是順時針 -
clip：從原始畫布中剪切任意形狀和尺寸
context.clip() - drawImage：繪制圖像到畫布
三種寫法：
context.drawImage(imageResource, dx, dy)
context.drawImage(imageResource, dx, dy, dWidth, dHeight)
context.drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 從 1.9.0 起支持
imageResource:圖片資源(不能是本地圖片，需要wx.downloadFile(Object object)下載的路徑); dx:圖像的左上角在目標(biāo) canvas 上 x 軸的位置; dy:圖像的左上角在目標(biāo) canvas 上 y 軸的位置; dWidth:繪制圖像的寬度; dHeight:繪制圖像的高度; sx:源圖像的矩形選擇框的左上角 x 坐標(biāo); sy:源圖像的矩形選擇框的左上角 y 坐標(biāo); sWidth:源圖像的矩形選擇框的寬度; sHeight:源圖像的矩形選擇框的高度;
-
save：保存繪圖上下文
content.save() -
restore：恢復(fù)之前保存的繪圖上下文
content.restore()
save和restore方法必須是配對使用的，restore方法前必須有save方法，不然會報Underflow in restore錯誤。
save表示保存sava函數(shù)之前的狀態(tài)，restore表示獲取save保存的狀態(tài)
-
draw：將之前在繪圖上下文中的描述（路徑、變形、樣式）畫到 canvas 中
content.draw()
運用：繪制一個圓的圖片
content.save()
content.beginPath()
content.arc(50, 50, 25, 0, 2 * Math.PI)
content.clip()
content.drawImage(url, 25, 25)
content.restore()
content.draw()
用clip方法一旦剪切了某個區(qū)域，則所有之后的繪圖都會被限制在被剪切的區(qū)域內(nèi)（不能訪問畫布上的其他區(qū)域）?？梢栽谑褂?clip 方法前通過使用 save 方法對當(dāng)前畫布區(qū)域進(jìn)行保存，并在以后的任意時間通過restore方法對其進(jìn)行恢復(fù)。
