精華
有關(guān)微信小程序的canvas開發(fā)
- • 發(fā)表于 8年前
- • 作者 丁小柒
- • 3247 人瀏覽
- • 17 條評論
- • 最后編輯時間 8年前
- • 來自 [技 術(shù)]
原創(chuàng)聲明:本文為作者原創(chuàng)，未經(jīng)允許不得轉(zhuǎn)載，經(jīng)授權(quán)轉(zhuǎn)載需注明作者和出處
var author: “丁小柒”
注:我是第一次寫這種文章，哪里不好的地方還請指出，我會改進的，希望可以給大家?guī)韼椭?/strong>
微信的小程序的canvas與js原生的canvas內(nèi)容十分類似
頁面的設置都是
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
設置canvas的樣式與id
js部分則通過wx.createContext()的方法來創(chuàng)建畫布的前后文，因為小程序目前只有2D，所以不需要來設置2d還是webGL
var con = wx.createContext();
接下來我們就可以進行繪制了，繪制的一般步驟是:
1.先定義繪制樣式 setStrokeStyle=’’ ;或者是setFillStyle=’’;con.setStrokeStyle("#00ff00");//描邊風格 (stroke是繪制路徑)con.setFillStyle("#00ff00"); //填充風格
2.設置要繪制的信息，這部分文檔里也有，不做詳細講解，只給添加上注釋con.setLineWidth(5);//設置線框的寬度con.rect(0,0,200,200);//繪制矩形，內(nèi)容分別為
(起點位置的橫坐標 , 起點位置的縱坐標, 矩形的寬, 矩形的高)
context.arc(x,y,r,sAngle,eAngle,true);//繪制圓形
**x 圓的中心的 x 坐標。
y 圓的中心的 y 坐標。
r 圓的半徑。**
sAngle 起始角，以弧度計。（弧的圓形的三點鐘位置是 0 度）。
eAngle 結(jié)束角，以弧度計。
False = 順時針，true = 逆時針。**
3.確定是路徑繪制還是填充繪制con.stroke(); con.fill();
這時我們會發(fā)現(xiàn)保存后界面上仍然什么都沒有，這時，我們就需要調(diào)用微信的drawCanvas來將以上要繪制的圖顯示在canvas上wx.drawCanvas({
canvasId: 'firstCanvas',
actions: con.getActions()
});
通過canvasId選擇canvas的id來確定canvas，以防創(chuàng)建多張canvas時造成的繪制錯誤,
通過actions來獲取繪圖動作數(shù)組，然后我們就可以保存了,這時我們就可以看到效果了
Page({
onReady: function (e) {
var con = wx.createContext();
這里進行繪制，大家都懂哈，上面也講了的
wx.drawCanvas({ //調(diào)用的wx.drawCanvas
canvasId: 'firstCanvas',
actions: con.getActions()
});
}
});
以下是我修改了實例上的代碼的路徑效果與填充效果
路徑效果
填充效果
