微信小程序API 繪圖

wx.createContext()

創(chuàng)建并返回繪圖上下文context對象。

context

context只是一個記錄方法調(diào)用的容器，用于生成記錄繪制行為的actions數(shù)組。context跟<canvas/>不存在對應(yīng)關(guān)系，一個context生成畫布的繪制動作數(shù)組可以應(yīng)用于多個<canvas/>。

// 假設(shè)頁面上有3個畫布
var canvas1Id = 3001;
var canvas2Id = 3002;
var canvas3Id = 3003;

var context = wx.createContext();

[canvas1Id, canvas2Id, canvas3Id].forEach(function (id) {
  context.clearActions();
  // 在context上調(diào)用方法
  wx.drawCanvas({
    canvasId: id,
    actions: context.getActions();
  });
});

context對象的方法列表：

方法詳解：

scale

在調(diào)用scale()方法后，之后創(chuàng)建的路徑其橫縱坐標(biāo)會被縮放。多次調(diào)用scale，倍數(shù)會相乘。

//scale.js
<!--scale.wxml --> <canvas canvas-id="1" />

Page({
  onReady:function(e){
    var context = wx.createContext();
    context.rect(5,5,25,15)
    context.stroke();
    context.scale(2,2); //再放大2倍
    context.rect(5,5,25,15);
    context.stroke();
    context.scale(2,2); //再放大2倍
    context.rect(5,5,25,15)
    context.stroke();
    wx.drawCanvas({
      canvasId:1,
      actions:context.getActions()
    });
  }
})

rotate

以原點為中心，原點可以用translate方法修改。順時針旋轉(zhuǎn)當(dāng)前坐標(biāo)軸。多次調(diào)用rotate，旋轉(zhuǎn)的角度會疊加。

示例代碼：

//rotate.js
Page({
  onReady:function(e){
    var context = wx.createContext();
    context.rect(50,50,200,200)
    context.stroke();
    context.rotate(5*Math.PI/180)
    context.rect(50,50,200,200)
      context.stroke();
      context.rotate(5*Math.PI/180)
      context.rect(50,50,200,200)
      context.stroke()

    wx.drawCanvas({
      canvasId:1,
      actions:context.getActions()
    });
  }
})

translate

對當(dāng)前坐標(biāo)系的原點(0, 0)進(jìn)行變換，默認(rèn)的坐標(biāo)系原點為頁面左上角。

示例代碼：

//translate.js
Page({
  onReady:function(){
    var context = wx.createContext();

    context.rect(50,50,200,200)
    context.stroke()
    context.translate(50,50)
    context.rect(50,50,200,200)
    context.stroke();

    wx.drawCanvas({
      canvasId:1,
      actions:context.getActions()
    });
  }
})

clearRect

清除畫布上在該矩形區(qū)域內(nèi)的內(nèi)容

示例代碼：

//clearrect.js
Page({
  onReady:function(){
    var context = wx.createContext();

    context.rect(50,50,200,200)
    context.fill()
    context.clearRect(100,100,50,50)

    wx.drawCanvas({
      canvasId:1,
      actions:context.getActions()
    });
  }
})

drawImage

繪制圖像，圖像保持原始尺寸。

示例：

//drawimage.js
Page({
  onReady:function(e){
    var context = wx.createContext();
    wx.chooseImage({
      success:function(res){
        context.drawImage(res.tempFilePaths[0],0,0)
        wx.drawCanvas({
          canvasId:1,
          actions:context.getActions()
        });
      }
    })
  }
})

fillText

在畫布上繪制被填充的文本。

示例代碼：

//filltext.js
Page({
  onReady:function(){
    var context = wx.createContext();

    context.setFontSize(14)
    context.fillText("MINA",50,50)
    context.moveTo(0,50)
    context.lineTo(100,50)
    context.stroke();

    context.setFontSize(20)
    context.fillText("MINA",100,100)
    context.moveTo(0,100)
    context.lineTo(200,100)
    context.stroke();
    wx.drawCanvas({
      canvasId:1,
      actions:context.getActions()
    });
  }
})

beginPath

開始創(chuàng)建一個路徑，需要調(diào)用fill或者stroke才會使用路徑進(jìn)行填充或描邊。同一個路徑內(nèi)的多次setFillStyle、setStrokeStyle、setLineWidth等設(shè)置，以最后一次設(shè)置為準(zhǔn)。

closePage

關(guān)閉一個路徑。

moveTo

把路徑移動到畫布中的指定點，不創(chuàng)建線條。

lineTo

在當(dāng)前位置添加一個新點，然后在畫布中創(chuàng)建從該點到最后指定點的路徑。

rect

添加一個矩形路徑到當(dāng)前路徑。

arc

添加一個弧形路徑到當(dāng)前路徑，順時針繪制。

quadraticCurveTo

創(chuàng)建二次貝塞爾曲線路徑。

bezierCurveTo

創(chuàng)建三次方貝塞爾曲線路徑。

setFillStyle

設(shè)置純色填充。

設(shè)置顏色為填充樣式

setStrokeStyle

設(shè)置純色描邊，參數(shù)同setFillStyle。

示例代碼：

//setfillstyle.js
Page({
  onReady:function(e){
    var context = wx.createContext();

    context.setFillStyle("#ff00ff");
    context.setStrokeStyle("#00ffff");

    context.rect(50,50,100,100)
    context.fill()
    context.stroke()
    wx.drawCanvas({
      canvasId:1,
      actions:context.getActions()
    });
  }
})

setShadow

設(shè)置陰影樣式。

setFontSize

設(shè)置字體的字號。

setLineWidth

設(shè)置線條的寬度。

setLineCap

設(shè)置線條的結(jié)束端點樣式。

setLineJoin

設(shè)置兩條線相交時，所創(chuàng)建的拐角類型。

setMiterLimit

設(shè)置最大斜接長度，斜接長度指的是在兩條線交匯處內(nèi)角和外角之間的距離。 當(dāng)setLineJoin為'miter'時才有效。超過最大傾斜長度的，連接處將以lineJoin為bevel來顯示

示例代碼：下載

//line.js
Page({
  onReady:function(e){
    var context = wx.createContext();

    context.setLineWidth(10);
    context.setLineCap("round")
    context.setLineJoin("miter");
    context.setMiterLimit(10);
    context.moveTo(20,20);
    context.lineTo(150,27);
    context.lineTo(20,54);
    context.stroke();

    context.beginPath();

    context.setMiterLimit(3);
    context.moveTo(20,70);
    context.lineTo(150,77);
    context.lineTo(20,104);
    context.stroke();

    wx.drawCanvas({
      canvasId:1,
      actions:context.getActions()
    });
  }
})

wx.drawCanvas(OBJECT)

OBJECT參數(shù)說明：

示例：下載

<!--canvas.wxml--><canvas cavas-id="firstCanvas" />

// index.js
Page({
  canvasIdErrorCallback: function (e) {

    console.error(e.detail.errMsg);
  },
  onReady: function (e) {

    //使用wx.createContext獲取繪圖上下文context
    var context = wx.createContext();

    context.setStrokeStyle("#00ff00");  
    context.setLineWidth(5);  
    context.rect(0,0,200,200);  
    context.stroke()
    context.setStrokeStyle ("#ff0000") ;
    context.setLineWidth (2)
    context.moveTo(160,100)
    context.arc(100,100,60,0,2*Math.PI,true);  
    context.moveTo(140,100);  
    context.arc(100,100,40,0,Math.PI,false);  
    context.moveTo(85,80);  
    context.arc(80,80,5,0,2*Math.PI,true);  
    context.moveTo(125,80);  
    context.arc(120,80,5,0,2*Math.PI,true);  
    context.stroke();  

    //調(diào)用wx.drawCanvas，通過canvasId指定在哪張畫布上繪制，通過actions指定繪制行為
    wx.drawCanvas({
      canvasId: 'firstCanvas',
      actions: context.getActions() //獲取繪圖動作數(shù)組
    });
  }
});