uniapp canvas绘制图形和文字

定义一个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;
				}
			})
		}
	})
})

uniapp canvas绘制图形和文字

猜你喜欢