mp-canvas

概述

微信小程序 canvas 绘图封装方法

安装

clone 本项目，将 mp-canvas.js 放到你的小程序项目里。

在小程序中使用 mp-canvas

import { drawTextarea } from "path/to/mp-canvas";
 
const ctx = wx.createCanvasContext("myCanvas");
 
drawTextarea(ctx, "测试", {
  x: 270,
  y: 70,
  fontSize: 24,
  lineHeight: 33
});
 
ctx.draw();

方法

drawTextarea(context, text, options)

文本绘制，支持超出...，删除线和下划线

用法

import { drawTextarea } from "path/to/mp-canvas";
 
const ctx = wx.createCanvasContext("myCanvas");
 
drawTextarea(ctx, "测试", {
  x: 20,
  y: 20,
  textDecoration: "line-through"
});
 
ctx.draw();

参数

• context：canvas 上下文，通过wx.createCanvasContext获得
• text：文本内容
• options：配置项，见下表

配置

配置名	类型	默认值	描述
x	number	0	文字在画布 x 轴上的位置，px
y	number	0	文字在画布 y 轴上的位置，px
fontSize	number	20	文字大小，px
lineHeight	number	20	行高，px
fontWeight	String	normal	文字粗细，支持 css 里font-weight的配置
color	string	#333333	文字颜色
textDecoration	string/boolean	false	文本修饰，支持line-through，underline
maxWidth	number/boolean	false	最大宽度，超过此宽度会换行显示，px
column	number/boolean	false	最大行数，超过此行数会以...显示

drawRoundRect(context, options)

绘制圆角矩形

用法

import { drawRoundRect } from "path/to/mp-canvas";
 
const ctx = wx.createCanvasContext("myCanvas");
 
drawRoundRect(ctx, {
  x: 310,
  y: 391,
  width: 110,
  height: 40,
  borderRadius: 4,
  borderColor: "#F21A21",
  borderWidth: 2
});
 
ctx.draw();

参数

• context：canvas 上下文，通过wx.createCanvasContext获得
• options：配置项，见下表

配置

配置名	类型	默认值	描述
x	number	0	矩形在画布 x 轴上的位置，px
y	number	0	矩形在画布 y 轴上的位置，px
width	number	0	矩形宽度，px
height	number	0	矩形高度，px
borderRadius	number	4	矩形圆角，px
borderWidth	number	0	边框宽度，px
borderColor	string	#333	边框颜色
backgroundColor	string	#fff	背景颜色

circleImg(context, imgUrl, x, y, d)

绘制圆框图片

用法

import { circleImg } from "path/to/mp-canvas";
 
const ctx = wx.createCanvasContext("myCanvas");
 
circleImg(ctx, localImageUrl, 20, 493, 20)
 
ctx.draw();

参数

• context：canvas 上下文，通过wx.createCanvasContext获得
• imgUrl：本地图片地址
• x：圆框图片在x轴上位置，px
• y：圆框图片在y轴上位置，px
• d：圆框图片直径，px