微信小程序API 繪圖

繪圖接口和方法

wx.createContext()

---

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

context

? context只是一個記錄方法調用的容器，用于生成記錄繪制行為的actions數組。context跟<canvas/>不存在對應關系，一個context生成畫布的繪制動作數組可以應用于多個<canvas/>。

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

var context = wx.createContext();

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

context對象的方法列表：

方法	參數	說明
getActions	無	獲取當前context上存儲的繪圖動作
clearActions	無	清空當前的存儲繪圖動作
變形
scale		對橫縱坐標進行縮放
rotate		對坐標軸進行順時針旋轉
translate		對坐標原點進行縮放
save	無	保存當前坐標軸的縮放、旋轉、平移信息
restore	無	恢復之前保存過的坐標軸的縮放、旋轉、平移信息
繪制
clearRect		在給定的矩形區(qū)域內，清除畫布上的像素
fillText		在畫布上繪制被填充的文本
drawImage		在畫布上繪制圖像
fill	無	對當前路徑進行填充
stroke	無	對當前路徑進行描邊
路徑
beginPath	無	開始一個路徑
closePath	無	關閉一個路徑
moveTo		把路徑移動到畫布中的指定點，但不創(chuàng)建線條。
lineTo		添加一個新點，然后在畫布中創(chuàng)建從該點到最后指定點的線條。
rect		添加一個矩形路徑到當前路徑。
arc		添加一個弧形路徑到當前路徑，順時針繪制。
quadraticCurveTo		創(chuàng)建二次方貝塞爾曲線
bezierCurveTo		創(chuàng)建三次方貝塞爾曲線
樣式
setFillStyle		設置填充樣式
setStrokeStyle		設置線條樣式
setShadow		設置陰影
setFontSize		設置字體大小
setLineCap		設置線條端點的樣式
setLineJoin		設置兩線相交處的樣式
setLineWidth		設置線條寬度
setMiterLimit		設置最大傾斜

方法詳解：

scale

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

參數	類型	范圍	說明
scaleWidth	Number	1=100%，0.5=50%，2=200%，依次類推	橫坐標縮放的倍數
scaleHeight	Number	1=100%，0.5=50%，2=200%，依次類推	縱坐標軸縮放的倍數

示例代碼：下載

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

//scale.js
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方法修改。順時針旋轉當前坐標軸。多次調用rotate，旋轉的角度會疊加。

參數	類型	范圍	說明
rotate	Number	degrees * Math.PI/180；degrees范圍為0~360	旋轉角度，以弧度計

示例代碼：下載

//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

對當前坐標系的原點(0, 0)進行變換，默認的坐標系原點為頁面左上角。

參數	類型	范圍	說明
x	Number		水平坐標平移量
y	Number		豎直坐標平移量

示例代碼：下載

//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ū)域內的內容

參數	類型	范圍	說明
x	Number		矩形區(qū)域左上角的x坐標
y	Number		矩形區(qū)域左上角的y坐標
width	Number		矩形區(qū)域的寬度
height	Number		矩形區(qū)域的高度

示例代碼：下載

//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

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

參數	類型	范圍	說明
imageResource	String	通過chooseImage得到一個文件路徑或者一個項目目錄內的圖片	所要繪制的圖片資源
x	Number		圖像左上角的x坐標
y	Number		圖像左上角的y坐標

示例：下載

//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

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

參數	類型	范圍	說明
text	String		在畫布上輸出的文本
x	Number		繪制文本的左上角x坐標位置
y	Number		繪制文本的左上角y坐標位置

示例代碼：下載

//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)建一個路徑，需要調用fill或者stroke才會使用路徑進行填充或描邊。同一個路徑內的多次setFillStyle、setStrokeStyle、setLineWidth等設置，以最后一次設置為準。

closePage

關閉一個路徑。

moveTo

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

參數	類型	范圍	說明
x	Number		目標位置的x坐標
y	Number		目標位置的y坐標

lineTo

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

參數	類型	范圍	說明
x	Number		目標位置的x坐標
y	Number		目標位置的y坐標

rect

添加一個矩形路徑到當前路徑。

參數	類型	范圍	說明
x	Number		矩形路徑左上角的x坐標
y	Number		矩形路徑左上角的y坐標
width	Number		矩形路徑的寬度
height	Number		矩形路徑的高度

arc

添加一個弧形路徑到當前路徑，順時針繪制。

參數	類型	范圍	說明
x	Number		矩形路徑左上角的x坐標
y	Number		矩形路徑左上角的y坐標
radius	Number		矩形路徑的寬度
startAngle	Number	弧度, 0到2pi	起始弧度
sweepAngle	Number	弧度, 0到2pi	從起始弧度開始，掃過的弧度

quadraticCurveTo

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

參數	類型	范圍	說明
cpx	Number		貝塞爾控制點的x坐標
cpy	Number		貝塞爾控制點的y坐標
x	Number		結束點的x坐標
y	Number		結束點的y坐標

bezierCurveTo

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

參數	類型	范圍	說明
cp1x	Number		第一個貝塞爾控制點的 x 坐標
cp1y	Number		第一個貝塞爾控制點的 y 坐標
cp2x	Number		第二個貝塞爾控制點的 x 坐標
cp2y	Number		第二個貝塞爾控制點的 y 坐標
x	Number		結束點的 x 坐標
y	Number		結束點的 y 坐標

---

setFillStyle

設置純色填充。

設置顏色為填充樣式

參數	類型	范圍	說明
color	String	'rgb(255, 0, 0)'或'rgba(255, 0, 0, 0.6)'或'#ff0000'格式的顏色字符串	設置為填充樣式的顏色

setStrokeStyle

? 設置純色描邊，參數同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

設置陰影樣式。

參數	類型	范圍	說明
offsetX	Number		陰影相對于形狀在水平方向的偏移
offsetY	Number		陰影相對于形狀在豎直方向的偏移
blur	Number	0~100	陰影的模糊級別，數值越大越模糊
color	Color	'rgb(255, 0, 0)'或'rgba(255, 0, 0, 0.6)'或'#ff0000'格式的顏色字符串	陰影的顏色

setFontSize

設置字體的字號。

參數	類型	范圍	說明
fontSize	Number		字體的字號

setLineWidth

設置線條的寬度。

參數	類型	范圍	說明
lineWidth	Number		線條的寬度

setLineCap

設置線條的結束端點樣式。

參數	類型	范圍	說明
lineCap	String	'butt'、'round'、'square'	線條的結束端點樣式

setLineJoin

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

參數	類型	范圍	說明
lineJoin	String	'bevel'、'round'、'miter'	兩條線相交時，所創(chuàng)建的拐角類型

setMiterLimit

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

參數	類型	范圍	說明
miterLimit	Number		最大斜接長度

示例代碼：下載

//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參數說明：

參數	類型	必填	說明
canvasId	String	是	畫布標識，傳入<canvas/>的cavas-id
actions	Array	是	繪圖動作數組，由wx.createContext創(chuàng)建的context，調用getActions方法導出繪圖動作數組。

示例：下載

<!--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();  

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

繪圖接口和方法