uniappcanvas绘制图形和⽂字
1. 定义⼀个canvas⽂本
<canvas class="myCanvas" canvas-id="myCanvas"></canvas>
2. 初始化canvas
let testCanvas = ateCanvasContext('myCanvas',that);
3. 开始绘制
/**
* 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)");
svg和canvas的区别testCanvas.setLineWidth(0);
testCanvas.arc(left-12, pY+12.5, 4, 4, Math.PI, false);//圆
testCanvas.lineTo(left, pY+25); //三⾓形第⼆个点
testCanvas.lineTo(left-10, pY+12.5); //三⾓形第三个点
testCanvas.stroke()
<(left, pY, 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+pY+18);//⽂字内容、x坐标，y坐标⽂字的样式设置必须放置在⽂字填充前testCanvas.closePath();
//合成
testCanvas.draw(true,()=>{
uni.canvasToTempFilePath({
canvasId:'myCanvas',
success: (res)=>{
pFilePath,
success(re){
// console.log(re)
that.canvasShow =false;
}
})
}
})
})