画布

平台差异

App	H5	微信小程序	支付宝小程序	头条小程序
√	√	√	√	√

Events

事件名称	说明	参数
previewImage	预览图片
createImage	生成图片
saveImage	保存图片
text	创建文本	options
image	创建图片	options
div	创建块	options

Options

事件名称	说明	类型	可选值	默认值
x	左上角的横坐标	number
y	左上角的纵坐标	number
fontSize	字体大小	number		14
text	文本内容	string
height	高度	number
width	宽度	number		100
border.width	边框宽度	number
border.color	边框颜色	string
radius	圆角	number
background-color	背景颜色	string
overflow	超出省略或者...	string	ellipsis
line-clamp	文本行数, 配合 ellipsis	number		1
letter-space	字间距	number		1
line-height	行间距	number		14

示例

WARNING

支付宝小程序下，请用 id 做标识

基本用法

import Canvas from "cl-uni/utils/canvas";

export default {
	mounted() {
		this.cvs = new Canvas("canvas-id", this);

		// 文本
		this.cvs.text({
			x: 10,
			y: 10,
			fontSize: 14,
			text: "情不知所起,一往而情深"
		});

		// 图片
		this.cvs.image({
			height: 100,
			width: 100,
			url: "http://xxxx"
		});

		// 块
		this.cvs.div({
			height: 100,
			width: 100,
			radius: 5,
			border: {
				width: 1,
				color: "red"
			},
			backgroundColor: "#fff"
		});
	}
};