canvas画布API

本文编辑：  JeremyLu浏览 4356 4 版权所有，严禁转载

接口说明:

<canvas />组件只能提供图像显示容器，不具备绘制能力，所以还需要使用脚本来完成实际的绘图任务，交由以下三个canvas API完成。

wx.createContext()创建并返回一个context上下文对象，用于记录绘制操作，并返回actions数组，交给wx.drawCanvas(OBJECT)绑定<canvas />组件，并将actions绘制在<canvas />组件上；如果想将图像保存为图片，调用wx.canvasToTempFilePath(OBJECT)接口。

接口用法：

• wx.drawCanvas绘制接口

wxml

<canvas canvas-id="canvas" ></canvas>

js

var context = wx.createContext()
wx.drawCanvas({
    canvasId: 'canvas',
    actions: context.getActions()
})

• wx.createContext接口返回对象的方法列表：

canvas缩放、旋转、平移

wxml

<canvas canvas-id="canvas_scale"></canvas>
<canvas canvas-id="canvas_rotate"></canvas>
<canvas canvas-id="canvas_translate"></canvas>

js

onReady:function(){
    var context = wx.createContext()
    context.rect(5, 5, 30, 30)
    context.stroke()
    //缩放
    context.scale(2,2)
    context.stroke()
    context.scale(2,2)
    context.stroke()
    wx.drawCanvas({
      canvasId: 'canvas_scale',
      actions: context.getActions()
    })
    context.clearActions()

    context.rect(30, 30, 100, 100)
    context.stroke()
    //旋转
    context.rotate(0.15)
    context.stroke()
    wx.drawCanvas({
      canvasId: 'canvas_rotate',
      actions: context.getActions()
    })
    context.clearActions()

    context.rect(30, 30, 100, 100)
    context.stroke()
    //平移
    context.translate(10, 10)
    context.stroke()
     wx.drawCanvas({
      canvasId: 'canvas_translate',
      actions: context.getActions()
    })
  }

wxss

canvas{
    border: 1px solid #E0E0E0;
    margin-top: 10px;
}

canvas绘制

wxml

<canvas canvas-id="canvas1"></canvas>
<canvas canvas-id="canvas2"></canvas>

js

onReady:function(){
    var context = wx.createContext()
    context.rect(15, 15, 100, 100)
    context.fill()
    context.stroke()
    //清除指定范内的像素
    context.clearRect(25, 25, 80, 80)
    //显示文字
    context.fillText('Text', 40, 40)
    wx.drawCanvas({
        canvasId: 'canvas1',
        actions: context.getActions()
    })
    context.clearActions()
    //显示图片
    wx.chooseImage({
      success: function(res) {
        context.drawImage(res.tempFilePaths[0], 0, 0)
        wx.drawCanvas({
          canvasId: 'canvas2',
          actions: context.getActions()
        })
      }
    })
  }

wxss

canvas{
    border: 1px solid lightgray;
    margin-top: 10px;
}

canvas路径

wxml

<canvas canvas-id="canvas1"></canvas>

js

onReady:function(){
    // 使用 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: 'canvas1',
      actions: context.getActions()
    })
  }

wxss

canvas{
    height: 500px;
}

canvas样式

wxml

<canvas canvas-id="canvas1"></canvas>
<button type="default" size="default" bindtap="saveas">另存</button>

js

onReady:function(){
    var context = wx.createContext()

    context.setFillStyle("#FF00FF")
    context.setStrokeStyle("#00FFFF")
    context.setGlobalAlpha(1)
    context.setShadow(10,10,10, '#000000')
    context.setFontSize(18)
    context.setLineWidth(3)
    context.setLineCap('round');
    context.setLineJoin('round')
    context.rect(50, 50, 100, 100)
    context.fill()
    context.stroke()
    wx.drawCanvas({
      canvasId: 'canvas1',
      actions: context.getActions()
    })
  },
  //canvas另存为图片
  saveas: function(e){
    wx.canvasToTempFilePath({
      canvasId: 'canvas1',
      success: function(res){
        console.log(res.tempFilePath)
      }
  }

主要方法

scale：缩放

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

rotate：旋转

以原点为中心，原点可以用 translate方法修改。顺时针旋转当前坐标轴。多次调用rotate，旋转的角度会叠加。

translate：平移

对当前坐标系的原点(0, 0)进行变换，默认的坐标系原点为页面左上角。

clearRect：清除指定区域内容

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

drawImage：绘制图像

绘制图像，图像保持原始尺寸。

fillText：填充文本

在画布上绘制被填充的文本

beginPath

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

closePage

关闭一个路径。

moveTo

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

lineTo

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

rect：添加矩形

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

arc：画圆

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

quadraticCurveTo：二次贝塞尔曲线

创建二次贝塞尔曲线路径

bezierCurveTo：三次方贝塞尔曲线

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

setFillStyle：设置颜色为填充样式

setStrokeStyle：设置纯色描边

setGlobalAlpha

置全局画笔透明度。

setShadow：阴影

设置阴影样式

setFontSize：字号

设置字体的字号。

setLineWidth：线宽

设置线条的宽度

setLineCap

设置线条的结束端点样式。

setLineJoin

设置两条线相交时，所创建的拐角类型。

setMiterLimit

设置最大斜接长度，斜接长度指的是在两条线交汇处内角和外角之间的距离。 当 setLineJoin为 miter 时才有效。超过最大倾斜长度的，连接处将以 lineJoin 为 bevel 来显示。

• wx.canvasToTempFilePath图片另存

wxml

<canvas canvas-id="canvas1"></canvas>
<button type="default" size="default" bindtap="saveas">另存</button>

js

saveas: function(e){
    wx.canvasToTempFilePath({
      canvasId: 'canvas1',
      success: function(res){
        console.log(res.tempFilePath)
      }
}

主要方法：