繪圖是每個移動應用必備的技術，基本上和Android，IOS，等移動開發都是相同的，創建個上下文，給你個畫布再上畫，官網給的小例子都比較全了自己去看吧，drawImage時沒有反應不知道是BUG還是電腦不能測試待定，http://wxopen.notedown.cn/api/api-canvas.html
屏幕就像是數學上的坐標軸，且在第四象限，以屏幕左上角為圓點，X軸向右為正向左為負，Y軸向下為正向上為負（這點和數學上相反的）以圓點為基點畫個距離圓點上下50寬高100的矩形來演示canvas基本用法
微信小程序這里提供了兩個API
wx.createContext() 創建并返回繪圖上下文context對象
getActions 獲取當前context上存儲的繪圖動作，對應wx.drawCanvas(object)中的actions
clearActions 清空當前的存儲繪圖動作
wx.drawCanvas(object) 繪制
canvasId 畫布標識，傳入的cavas-id，這里的標識可以為Number，也可以是String
actions 繪圖動作數組，由wx.createContext創建的context，調用getActions方法導出繪圖動作數組。
繪圖中可以進行變形，繪制，路徑，樣式，這些個東西有點多官網有例子，這里通過一個例子引入
wxml
<!--畫布 canvas-id 為畫布標識，當繪制時通過canvas-id找到畫布--><canvas canvas-id="identify"/>
js
Page({ data:{ text:"Page canvas" }, onLoad:function(options){ // 頁面初始化 options為頁面跳轉所帶來的參數 }, onReady:function(){ // 頁面渲染完成 //第一步創建個上下文容器 var context = wx.createContext(); //第二步繪制這里我們繪制個矩形 //x, y, widht, height context.rect(50, 50, 100, 100); //繪制的樣式進行描邊繪制，fill為填充位置 context.stroke(); /** * 調用wx.drawCanvas，通過canvasId指定在哪張畫布上繪制，通過actions指定繪制行為 * * 注意convasId可以為數字表示也可以用字符串表示，就是一個繪制對象的標識，并且可以指定多個 * actions 是從context上下文中獲取的繪制行為，即為第二步操作 */ wx.drawCanvas({ //畫布標識，傳入<canvas/>的cavas-id canvasId: 'identify', //獲取繪制行為， 就相當于你想做到菜context.getActions()就是食材 actions: context.getActions(), }) }, onShow:function(){ // 頁面顯示 }, onHide:function(){ // 頁面隱藏 }, onUnload:function(){ // 頁面關閉 }})感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
