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

方法详解：

scale

在调用scale()方法后，之后创建的路径其横纵坐标会被缩放。多次调用scale，倍数会相乘。

示例代码：下载

<!--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.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)进行变换，默认的坐标系原点为页面左上角。

示例代码：下载

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

清除画布上在该矩形区域内的内容

示例代码：下载

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

开始创建一个路径，需要调用fill或者stroke才会使用路径进行填充或描边。同一个路径内的多次setFillStyle、setStrokeStyle、setLineWidth等设置，以最后一次设置为准。

closePage

关闭一个路径。

moveTo

把路径移动到画布中的指定点，不创建线条。

lineTo

在当前位置添加一个新点，然后在画布中创建从该点到最后指定点的路径。

rect

添加一个矩形路径到当前路径。

arc

添加一个弧形路径到当前路径，顺时针绘制。

quadraticCurveTo

创建二次贝塞尔曲线路径。

bezierCurveTo

创建三次方贝塞尔曲线路径。

setFillStyle

设置纯色填充。

设置颜色为填充样式

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来显示

示例代码：下载

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

绘图接口和方法