<template>
<view class="page">
<view>canvas:</view>
<canvas canvas-id="cnavas" style="width: 300px;":style="'height:' + height + 'px'"></canvas>
<view>图片：</view>
<image :src="path" mode="widthFix"></image>
</view>
</template>
export default {
data: () => ({
path: '',
height: 320
}),
created() {},
mounted() {
var context = uni.createCanvasContext('cnavas');
context.setStrokeStyle('#00ff00');
context.setLineWidth(5);
context.rect(0, 0, 200, this.height-10);
context.stroke();
context.setStrokeStyle('#ff0000');
context.setLineWidth(2);
context.moveTo(160, 100);
context.arc(100, 100, 60, 0, 2 * Math.PI, true);
context.moveTo(140, 100);
context.arc(100, 100, 40, 0, Math.PI, false);
context.moveTo(85, 80);
context.arc(80, 80, 5, 0, 2 * Math.PI, true);
context.moveTo(125, 80);
context.arc(120, 80, 5, 0, 2 * Math.PI, true);
context.stroke();
context.draw();
setTimeout(this.canvasToTempFilePath, 300)
},
methods: {
canvasToTempFilePath() {
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: 300,
height: this.height,
fileType: 'jpg',
quality: 0.7,
canvasId: 'cnavas',
success: (res) => {
this.path = res.tempFilePath
}
})
}
}
};
陌上华年 (作者)
经测试，无效！JPG也不起作用。麻烦您测试一下，HBX为3.1.4 PC浏览
2021-03-25 18:11