微信小程序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對象的方法列表：

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

方法詳解：

scale

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

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

示例代碼：下載

<!--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方法修改。順時針旋轉(zhuǎn)當(dāng)前坐標(biāo)軸。多次調(diào)用rotate，旋轉(zhuǎn)的角度會疊加。

參數(shù)	類型	范圍	說明
rotate	Number	degrees * Math.PI/180；degrees范圍為0~360	旋轉(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)進行變換，默認(rèn)的坐標(biāo)系原點為頁面左上角。

參數(shù)	類型	范圍	說明
x	Number		水平坐標(biāo)平移量
y	Number		豎直坐標(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)容

參數(shù)	類型	范圍	說明
x	Number		矩形區(qū)域左上角的x坐標(biāo)
y	Number		矩形區(qū)域左上角的y坐標(biāo)
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

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

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

示例：下載

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

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

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

示例代碼：下載

//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才會使用路徑進行填充或描邊。同一個路徑內(nèi)的多次setFillStyle、setStrokeStyle、setLineWidth等設(shè)置，以最后一次設(shè)置為準(zhǔn)。

closePage

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

moveTo

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

參數(shù)	類型	范圍	說明
x	Number		目標(biāo)位置的x坐標(biāo)
y	Number		目標(biāo)位置的y坐標(biāo)

lineTo

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

參數(shù)	類型	范圍	說明
x	Number		目標(biāo)位置的x坐標(biāo)
y	Number		目標(biāo)位置的y坐標(biāo)

rect

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

參數(shù)	類型	范圍	說明
x	Number		矩形路徑左上角的x坐標(biāo)
y	Number		矩形路徑左上角的y坐標(biāo)
width	Number		矩形路徑的寬度
height	Number		矩形路徑的高度

arc

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

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

quadraticCurveTo

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

參數(shù)	類型	范圍	說明
cpx	Number		貝塞爾控制點的x坐標(biāo)
cpy	Number		貝塞爾控制點的y坐標(biāo)
x	Number		結(jié)束點的x坐標(biāo)
y	Number		結(jié)束點的y坐標(biāo)

bezierCurveTo

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

參數(shù)	類型	范圍	說明
cp1x	Number		第一個貝塞爾控制點的 x 坐標(biāo)
cp1y	Number		第一個貝塞爾控制點的 y 坐標(biāo)
cp2x	Number		第二個貝塞爾控制點的 x 坐標(biāo)
cp2y	Number		第二個貝塞爾控制點的 y 坐標(biāo)
x	Number		結(jié)束點的 x 坐標(biāo)
y	Number		結(jié)束點的 y 坐標(biāo)

---

setFillStyle

設(shè)置純色填充。

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

參數(shù)	類型	范圍	說明
color	String	'rgb(255, 0, 0)'或'rgba(255, 0, 0, 0.6)'或'#ff0000'格式的顏色字符串	設(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è)置陰影樣式。

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

setFontSize

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

參數(shù)	類型	范圍	說明
fontSize	Number		字體的字號

setLineWidth

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

參數(shù)	類型	范圍	說明
lineWidth	Number		線條的寬度

setLineCap

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

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

setLineJoin

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

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

setMiterLimit

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

參數(shù)	類型	范圍	說明
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參數(shù)說明：

參數(shù)	類型	必填	說明
canvasId	String	是	畫布標(biāo)識，傳入<canvas/>的cavas-id
actions	Array	是	繪圖動作數(shù)組，由wx.createContext創(chuàng)建的context，調(diào)用getActions方法導(dǎo)出繪圖動作數(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ù)組
    });
  }
});

繪圖接口和方法