onReady() {
const ctx = uni.createCanvasContext('imageCanvas');
// 3. 开始绘制
uni.chooseImage({
success: (res) => {
this.drawOnCanvas(ctx, rect, res.tempFilePaths[0]);
}
})
},
methods: {
drawOnCanvas(ctx, rect, tempFilePath) {
// 清空画布（如果需要）
ctx.clearRect(0, 0, rect.width, rect.height);
console.log('tempFilePath', tempFilePath)
ctx.drawImage(tempFilePath, 0, 0, rect.width, rect.height);
// 执行绘制
ctx.draw(true, () => {
console.log('✅ 绘制完成1111！');
});
// 示例1：绘制矩形
ctx.setFillStyle('#FF6B6B');
ctx.fillRect(50, 50, 100, 80);
// 示例2：绘制边框
ctx.setStrokeStyle('#4ECDC4');
ctx.setLineWidth(3);
ctx.strokeRect(50, 50, 100, 80);
// 示例3：绘制文字
ctx.setFillStyle('#2C3E50');
ctx.setFontSize(20);
ctx.fillText('Hello Canvas', 60, 120);
// 示例4：绘制圆形
ctx.beginPath();
ctx.arc(200, 100, 40, 0, 2 * Math.PI);
ctx.setFillStyle('#FFE66D');
ctx.fill();
ctx.setStrokeStyle('#F39C12');
ctx.setLineWidth(2);
ctx.stroke();
// 示例5：绘制线条
ctx.beginPath();
ctx.moveTo(300, 30);
ctx.lineTo(350, 80);
ctx.lineTo(300, 130);
ctx.setStrokeStyle('#9B59B6');
ctx.setLineWidth(4);
ctx.stroke();
// 执行绘制
ctx.draw(true, () => {
console.log('✅ 绘制完成22222！');
});
}, }
0 个回复