关于uniapp的绘制canvas 和 常规canvas的区别

4,634 阅读1分钟

常规h5获得的canvas

	// //var canvas = document.createElement("canvas"); //创建画布
	// console.log(canvas);
	// canvas.width = tLength * 15; //设置画布宽度,15为字体大小
	// canvas.height = 22; //设置画布高度
	// //var context = canvas.getContext("2d"); //获取绘图环
	// context.textAlign = "center"; //设置居中
	// context.fillStyle = 'rgba(255, 255, 255, 0)'; //设置画布颜色
	// context.fillRect(0, 0, canvas.width, canvas.height); //绘制白色背景,rect为方形
	// context.font = "blod 35px 宋体"; //加粗,字号,字体
	// context.fillStyle = "#007AFF"; //设置黑色画笔
	// context.fillText(text, canvas.width / 2, canvas.height / 2); //添加文字
	// // console.log(canvas.toDataURL("image/jpeg")); //转换为jpg
	// // console.log(canvas.toDataURL({
	// // 	format: 'png',
	// // 	quality: 1
	// // })); //转换为png 当前需要的为png
        
        
        

uniapp的canvas

	let tLength = text.length;
	var ctx = uni.createCanvasContext('CanvasCon', this)
	ctx.setFillStyle('rgba(255, 255, 255, 0)'); // 背景透明色
	let canvaswidth = tLength * 30; //设置画布宽度,30为字体大小
	let canvasheight = 22; //设置画布高度
	console.log(canvaswidth,canvasheight);
	ctx.fillRect(0, 0, canvaswidth, canvasheight) // fillRect(x,y,宽度,高度)
	ctx.setTextAlign('center')//文字居中
	console.log(text);
	ctx.setFillStyle('#e31d1a') // 颜色
	ctx.fillText(text, canvaswidth / 2, canvasheight / 2)//将文字写如入图片
	ctx.draw(true,(ret)=>{ // draw方法 把以上内容画到 canvas 中。
							uni.canvasToTempFilePath({ // 保存canvas为图片
								canvasId: 'CanvasCon',
								quality: 1,
								complete: function(res) {
									// 在H5平台下,tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败,APP端正常输出临时路径
									console.log(res)
									that.chooseText(res.tempFilePath)
									
								} ,
							})
						});
			},

主要的坑就是uniapp下如果做的APP项目不能创建dom对象 原本方法在真机上会报错 一定要用下面的方式