uni-app Canvas中解决文本颜色被背景色覆盖问题

uni-app Canvas中解决文本颜色被背景色覆盖问题

步骤1：用uni-app中的canvas绘制一矩形，边框设置为红色，背景色设置为黄色：

		draw: function() {
				context.beginPath()
				context.rect(25, 25, 50, 50);
				context.setFillStyle('yellow');
				context.setStrokeStyle('red');
				context.stroke();
				context.fill();
				context.draw();
		}

效果如图：可正常显示

步骤2：在上方矩形中添加文本——‘hello’，并设置颜色为黑色，初步思路是设置完背景色之后设置文字颜色

		draw: function() {
				context.beginPath()
				context.rect(25, 25, 50, 50);
				context.setFillStyle('yellow');
				context.setStrokeStyle('red');
				context.fillText('hello', 40, 40);
				context.setFillStyle('#000000');
				context.setFontSize(20);
				context.stroke();
				context.fill();
				context.draw();
		}

效果如图：结果却是背景色被覆盖了

步骤3：官方文档中也没找到单独修改文本样式的API，后转化思路，矩形绘制完在绘制文本：

		draw: function() {
				context.beginPath()
				context.rect(25, 25, 50, 50);
				context.setFillStyle('yellow');
				context.setStrokeStyle('red');
				context.stroke();
				context.fill();
				context.setFillStyle('#000000'); // 注意，这里设置颜色要放在设置文本fillText的上方，要不没有效果
				context.fillText('hello', 40, 40);
				context.setFontSize(20);
				context.draw();
		}

效果如图：可正常显示

暂时还不知道有没有其他设置方法，如果大家有更好的方法，欢迎分享呀~