uniapp canvas绘制图形和文字

  1. 定义一个canvas文本
<canvas class="myCanvas" canvas-id="myCanvas" ></canvas>
  1. 初始化canvas
let testCanvas = uni.createCanvasContext('myCanvas',that);
  1. 开始绘制
/**
* 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;
				}
			})
		}
	})
})
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页