uniapp画布基本使用

<template>
<view>
<canvas canvas-id="cs" id="cs"></canvas>
<view class="baoc" @tap="baocun">
保存
</view>
</view>
</template>

<script>
export default {
data() {
return {
gao:1920,
kuan:1080,
ish5:0
}
},
mounted(){
// #ifdef H5
// 监听设备网络状态变化事件
this.ish5=1
// #endif
let self = this;
uni.getSystemInfo({
success: function (res) {
/* console.log(res.model);
console.log(res.pixelRatio);
console.log(res.windowWidth);
console.log(res.windowHeight);
console.log(res.language);
console.log(res.version);
console.log(res.platform);*/
self.gao=res.windowHeight
self.kuan=res.windowWidth
}
});
this.hb()
},
methods: {
baocun(){
var that=this;
uni.canvasToTempFilePath({
x: 0,
y: 0,
that.kuan*0.8,
height: 300,
destWidth: that.kuan*0.8,
destHeight: 300,
canvasId: 'cs',
success: function(res) {
// 在H5平台下，tempFilePath 为 base64
console.log(res.tempFilePath)
if(that.ish5==1){
uni.downloadFile({
url: res.tempFilePath, //仅为示例，并非真实的资源
success: (res) => {
console.log('ss')
console.log(res)
if (res.statusCode === 200) {
console.log('下载成功');
that.saveImg(res.tempFilePath)
}
}
});
}else{
uni.downloadFile({
url: res.tempFilePath, //仅为示例，并非真实的资源
success: (res) => {
if (res.statusCode === 200) {
console.log('下载成功');
}
}
});
}
}
})
},
saveImg: function(url){
var oA = document.createElement("a");
oA.download = '';// 设置下载的文件名，默认是'下载'
oA.href = url;
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
},

hb(){
var that=this;
var ctx = uni.createCanvasContext('cs');
var heng=that.kuan*0.8*0.5-50
console.log(heng)
uni.getImageInfo({
src: "/static/logo.png",
success(res) {
console.log(res.path)
ctx.drawImage(res.path, heng,40, 100, 100)// 设置图片坐标及大小，括号里面的分别是（图片路径，x坐标，y坐标，width，height）
ctx.save();//保存
//ctx.setTextAlign('center')
// ctx.font = 'normal 20px STXingkai'; // 字体
ctx.setFontSize(16) //设置字体大小，默认10
ctx.setFillStyle('#3A85FF') //文字颜色：默认黑色
//ctx.fillText("事事通",that.kuan*0.8*0.5,200);//文字内容、x坐标，y坐标
var str="事事通事事通事事通事事通事事通事事通事事通事事通事事通事事通"
that.drawText(ctx, str, 20, 200, 30,that.kuan*0.8 -40);// 调用行文本换行函数

ctx.draw()//绘制
}
})



// ctx.draw()
},

/**
* 绘制多行文本
* ctx canvas对象
* str 文本
* leftWidth 距离左侧的距离
* initHeight 距离顶部的距离
* titleHeight 文本的高度
* canvasWidth 文本的宽度
* @returns {*}
*/

drawText (ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
let lineWidth = 0;
let lastSubStrIndex = 0; //每次开始截取的字符串的索引
for (let i = 0; i < str.length; i++) {
lineWidth += ctx.measureText(str[i]).width;
if (lineWidth > canvasWidth) {
ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分
initHeight += 22; //22为 文字大小20 + 2
lineWidth = 0;
lastSubStrIndex = i;
titleHeight += 22;
}
if (i == str.length - 1) { //绘制剩余部分
ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
}
}
// 标题border-bottom 线距顶部距离
titleHeight = titleHeight + 10;
return titleHeight;
},

}
}
</script>

<style>
#cs{
80%;
height: 300px;
border: 2px solid #3A85FF;
border-radius: 2px;
margin: 0 auto;
margin-top: 100px;
}
.baoc{
80px;
height: 40px;
border-radius: 6px;
line-height: 40px;
text-align: center;
font-size: 14px;
color: white;
margin: 30px auto;
background-color: #3A85FF;
}
</style>