微信小程序 canvas API詳解及實(shí)例代碼
繪圖是每個(gè)移動(dòng)應(yīng)用必備的技術(shù),基本上和Android,IOS,等移動(dòng)開(kāi)發(fā)都是相同的,創(chuàng)建個(gè)上下文,給你個(gè)畫(huà)布再上畫(huà),官網(wǎng)給的小例子都比較全了自己去看吧,drawImage時(shí)沒(méi)有反應(yīng)不知道是BUG還是電腦不能測(cè)試待定,http://wxopen.notedown.cn/api/api-canvas.html
屏幕就像是數(shù)學(xué)上的坐標(biāo)軸,且在第四象限,以屏幕左上角為圓點(diǎn),X軸向右為正向左為負(fù),Y軸向下為正向上為負(fù)(這點(diǎn)和數(shù)學(xué)上相反的)以圓點(diǎn)為基點(diǎn)畫(huà)個(gè)距離圓點(diǎn)上下50寬高100的矩形來(lái)演示canvas基本用法
微信小程序這里提供了兩個(gè)API
wx.createContext() 創(chuàng)建并返回繪圖上下文context對(duì)象
getActions 獲取當(dāng)前context上存儲(chǔ)的繪圖動(dòng)作,對(duì)應(yīng)wx.drawCanvas(object)中的actions
clearActions 清空當(dāng)前的存儲(chǔ)繪圖動(dòng)作
wx.drawCanvas(object) 繪制
canvasId 畫(huà)布標(biāo)識(shí),傳入的cavas-id,這里的標(biāo)識(shí)可以為Number,也可以是String
actions 繪圖動(dòng)作數(shù)組,由wx.createContext創(chuàng)建的context,調(diào)用getActions方法導(dǎo)出繪圖動(dòng)作數(shù)組。
繪圖中可以進(jìn)行變形,繪制,路徑,樣式,這些個(gè)東西有點(diǎn)多官網(wǎng)有例子,這里通過(guò)一個(gè)例子引入
wxml
<!--畫(huà)布 canvas-id 為畫(huà)布標(biāo)識(shí),當(dāng)繪制時(shí)通過(guò)canvas-id找到畫(huà)布 --> <canvas canvas-id="identify"/>
js
Page({ data:{ text:"Page canvas" }, onLoad:function(options){ // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù) }, onReady:function(){ // 頁(yè)面渲染完成 //第一步創(chuàng)建個(gè)上下文容器 var context = wx.createContext(); //第二步繪制這里我們繪制個(gè)矩形 //x, y, widht, height context.rect(50, 50, 100, 100); //繪制的樣式進(jìn)行描邊繪制,fill為填充位置 context.stroke(); /** * 調(diào)用wx.drawCanvas,通過(guò)canvasId指定在哪張畫(huà)布上繪制,通過(guò)actions指定繪制行為 * * 注意convasId可以為數(shù)字表示也可以用字符串表示,就是一個(gè)繪制對(duì)象的標(biāo)識(shí),并且可以指定多個(gè) * actions 是從context上下文中獲取的繪制行為,即為第二步操作 */ wx.drawCanvas({ //畫(huà)布標(biāo)識(shí),傳入<canvas/>的cavas-id canvasId: 'identify', //獲取繪制行為, 就相當(dāng)于你想做到菜context.getActions()就是食材 actions: context.getActions(), }) }, onShow:function(){ // 頁(yè)面顯示 }, onHide:function(){ // 頁(yè)面隱藏 }, onUnload:function(){ // 頁(yè)面關(guān)閉 } })
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
微信小程序 require機(jī)制詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序 require機(jī)制詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-12-12echart實(shí)現(xiàn)大屏動(dòng)效示例詳解
這篇文章主要為大家介紹了echart實(shí)現(xiàn)大屏動(dòng)效示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08JavaScript實(shí)現(xiàn)一個(gè)Promise隊(duì)列小工具
這篇文章主要介紹了JavaScript實(shí)現(xiàn)一個(gè)Promise隊(duì)列小工具,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08微信小程序 location API接口詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序 location API接口相關(guān)資料,這里詳細(xì)介紹了location API接口并附簡(jiǎn)單實(shí)例代碼,需要的朋友可以參考下2016-10-10