uniapp canvas绘制图形和文字

定义一个canvas文本<canvas class="myCanvas" canvas-id="myCanvas" ></canvas>初始化canvaslet testCanvas = uni.createCanvasContext('myCanvas',that);开始绘制/*** img 图片路径，可线上图片也可本地图片* offsetLeft x轴偏移量* offs

折纸成鸢。

3915人浏览 · 2021-01-22 17:49:17

折纸成鸢。 · 2021-01-22 17:49:17 发布

定义一个canvas文本

<canvas class="myCanvas" canvas-id="myCanvas" ></canvas>

初始化canvas

let testCanvas = uni.createCanvasContext('myCanvas',that);

开始绘制

/**
* img 图片路径，可线上图片也可本地图片
* offsetLeft x轴偏移量
* offsetTop  y轴偏移量
* canvasW canvas宽
* canvasH canvas高
* */

testCanvas.drawImage(img,offsetLeft,offsetTop,canvasW,canvasH);

testCanvas.beginPath();
testCanvas.setStrokeStyle("rgba(255,79,88,0)");
testCanvas.setLineWidth(0);
testCanvas.arc(left-12, item.topY+12.5, 4, 4, Math.PI, false);//圆
testCanvas.moveTo(left, item.topY);//三角形 第一个点
testCanvas.lineTo(left, item.topY+25); //三角形第二个点
testCanvas.lineTo(left-10, item.topY+12.5); //三角形第三个点
testCanvas.stroke()
testCanvas.rect(left, item.topY, 70, 25); //长方形绘制					
testCanvas.fillStyle = 'rgba(255,79,88,.5)'; //若是给定了值就用给定的值否则给予默认值
testCanvas.fill();
testCanvas.stroke();
testCanvas.setFillStyle('#FFFFFF'); //文字颜色：默认黑色
testCanvas.setFontSize(14); //设置字体大小，默认10 
testCanvas.fillText(item.name,left+5,item.topY+18);//文字内容、x坐标，y坐标 文字的样式设置必须放置在文字填充前
testCanvas.closePath();
//合成
testCanvas.draw(true,()=>{
	uni.canvasToTempFilePath({
		canvasId:'myCanvas',
		success: (res) => {
			uni.getImageInfo({
				src:res.tempFilePath,
				success(re) {
					// console.log(re)
					that.canvasShow = false;
				}
			})
		}
	})
})