微信小程序 canvas 操作存码（ 建议收藏 ）

存码

有补充联系我，或在下方评论补充

代码片段

const text = obj => { //插入文字
 return new Promise((resolve, reject)=>{
	obj.ctx.save();
	obj.ctx.fillStyle=obj.color||"blue";
	obj.ctx.font=obj.font||"20px 楷体";
	obj.ctx.fillText(obj.content||"你还没输入内容", obj.x, obj.y)
	obj.ctx.restore();
	obj.ctx.draw(true);
	resolve('操作成功');
 })
}
const image = obj => {
	return new Promise((resolve, reject)=>{
		obj.ctx.save();
		obj.ctx.drawImage(obj.image, obj.x, obj.y, obj.w, obj.h);
		obj.ctx.restore();
		obj.ctx.draw(true);
		resolve('操作成功');
	})
}
const imageRound = obj => {
	return new Promise((resolve, reject)=>{
		obj.ctx.save();
		obj.ctx.beginPath();
		obj.ctx.moveTo(obj.x+obj.r,obj.y);
		obj.ctx.arcTo(obj.x+obj.w,obj.y,obj.x+obj.w,obj.y+obj.h,obj.r);
		obj.ctx.arcTo(obj.x+obj.w,obj.y+obj.h,obj.x,obj.y+obj.h,obj.r);
		obj.ctx.arcTo(obj.x,obj.y+obj.h,obj.x,obj.y,obj.r);
		obj.ctx.arcTo(obj.x,obj.y,obj.x+obj.w,obj.y,obj.r);
		obj.ctx.lineWidth = 0;//线条的宽度
		obj.ctx.strokeStyle = "#FFFFFF";//线条的颜色
		obj.ctx.stroke();
		obj.ctx.clip();
		obj.ctx.drawImage(obj.image, obj.x, obj.y, obj.w, obj.h);
		obj.ctx.closePath();
		obj.ctx.restore();
		obj.ctx.draw(true);
		resolve('操作成功');
	})
}
const background = obj => {
	return new Promise((resolve, reject)=>{
		obj.ctx.save();
		obj.ctx.fillStyle = obj.color||"black";
		obj.ctx.fillRect(obj.x,obj.y,obj.w,obj.h)
		obj.ctx.restore();
		obj.ctx.draw(true);
		resolve('操作成功');
	})
}
// 用法
// background({
// 	ctx:context,
// 	x:0,
// 	y:0,
// 	color:"red",
// 	w:100,
// 	h:100
// });
// text({
// 	ctx:context,
// 	content:"内容",
// 	color:"blue",
// 	font:"20px 楷体",
// 	size:20,
// 	x:0,
// 	y:20
// })
// image({
//    ctx:context,
//    image:"http://img.doutula.com/production/uploads/image/2020/11/28/20201128547822_AareNy.jpg",
//    x:50,
//    y:50,
//    w:50,
//    h:50
// });
// imageRound({
// 	ctx:context,
// 	image:"http://img.doutula.com/production/uploads/image/2020/11/28/20201128547822_AareNy.jpg",
// 	x:50,
// 	y:50,
// 	w:50,
// 	h:50,
// 	r:25
// });
export {
	text,image,imageRound,background
}