微信小程式API 繪圖

wx.createContext()

---

建立並傳回繪圖上下文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物件的方法清單：

###translate  對座標原點進行縮放#save無儲存目前座標軸的縮放、旋轉、平移資訊restore#無#已恢復先前儲存過的座標軸的縮放、旋轉、平移資訊繪製  #clearRect 在給定的矩形區域內，清除畫布上的像素fillText 在畫布上繪製被填滿的文字drawImage 在畫布上繪製圖像fill無對目前路徑進行填入stroke無對目前路徑進行描邊##路徑beginPathclosePath moveTolineTorectarcquadraticCurveTobezierCurveTo樣式setFillStyle#setStrokeStylesetShadow#setFontSizesetLineCap##setLineJoin設定兩線相交處的樣式setLineWidth 設定線條寬度setMiterLimit 設定最大傾斜#

方法詳解：

scale

在呼叫scale()方法後，之後所建立的路徑其橫縱座標會被縮放。多次呼叫scale，倍數會相乘。

//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方法修改。順時針旋轉目前座標軸。多次呼叫rotate，旋轉的角度會疊加。

方法	參數	說明
getActions	無	取得目前context上儲存的繪圖動作
clearActions	無	清空目前的儲存繪圖動作
變形
#scale		對橫縱座標進行縮放
rotate		對座標軸進行順時針旋轉
#無	開始一個路徑
無	關閉一個路徑
	把路徑移到畫布中的指定點，但不創建線條。
	新增一個新點，然後在畫布中建立從該點到最後指定點的線條。
	新增一個矩形路徑到目前路徑。
	新增一個弧形路徑到目前路徑，順時針繪製。
	#建立二次方貝塞爾曲線
	建立三次方貝茲曲線
	設定填滿樣式
	#設定線條樣式
	設定陰影
	#設定字體大小
	#設定線條端點的樣式

rotateNumberdegrees * 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)進行變換，預設的座標係原點為頁面左上角。 參數類型範圍說明xNumber 水平座標平移量yNumber 垂直座標平移量

#範例程式碼：

//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()
    });
  }
})

---

參數類型範圍說明#xNumber# 

	#clearRect	清除畫布上在該矩形區域內的內容

### ##矩形區域左上角的x座標############y######Number####### ######矩形區域左上角的y座標## ##########width######Number###### ######矩形區域的寬度###########height#### ###Number###### ######矩形區域的高度#############

範例程式碼：

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

在畫布上繪製被填滿的文字。

參數類型範圍說明在畫布上輸出的文字繪製文字的左上角x座標位置繪製文字的左上角y座標位置

	text	String
	x	Number
	#y	Number

範例程式碼：

//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開始建立一個路徑，需要呼叫fill或stroke才會使用路徑來填滿或描邊。同一個路徑內的多次setFillStyle、setStrokeStyle、

setLineWidth

等設置，以最後一次設定為準。

closePage

關閉一個路徑。

moveTo

把路徑移到畫布中的指定點，不建立線條。

lineTo

在目前位置新增一個新點，然後在畫布中建立從該點到最後指定點的路徑。 說明目標位置的x座標目標位置的y座標

	參數	類型	範圍
	x	Number
	y	Number

#######

rect

新增一個矩形路徑到目前路徑。

arc

新增一個弧形路徑到目前路徑，順時針繪製。

quadraticCurveTo

建立二次貝塞爾曲線路徑。

bezierCurveTo

建立三次方貝塞爾曲線路徑。

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

設定陰影樣式。

setFontSize

#設定字體的字號。

setLineWidth

設定線條的寬度。

setLineCap

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

setLineJoin

設定兩條線相交時，所建立的角落類型。

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

#範例：下載

<!--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() //获取绘图动作数组
    });
  }
});