欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序 canvas API詳解及實(shí)例代碼

 更新時(shí)間：2016年10月08日 10:01:46   作者：順子_RTFSC  
這篇文章主要介紹了微信小程序 canvas API詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下

繪圖是每個(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)文章

最新評(píng)論