微信小程序 Canvas 2dAPI的绘图使用

Html

 <!-- canvas 画板 -->
<view :class="showCanvasCSS" >
<canvas
type="2d"
id="canvas"
class='canvas-style'
/>
<view class="linkcopy">
<u-button class="linkcopyBtn" icon="download" type="info"
@click="CloseCanvas">取消</u-button>
<u-button class="linkcopyBtn" icon="download" type="primary"
@click="uploads">保存图片</u-button>
</view>
</view>

CSS

.canvas-style{
margin: 0 auto;
width: 100%;
height: 990rpx;
// border: 1px solid black;
}
.container{
z-index: 3;
position: fixed;
top:150rpx;
width: 100%;
height: 1100rpx;
// border: 1px solid red;
}
.container2{
position: fixed;
left:9950rpx;
width: 100%;
height: 1100rpx;
// border: 1px solid red;
}
.linkcopy{
width: 100%;
}
.linkcopyBtn{
display: inline-block;
float: left;
margin-top: 25rpx;
margin-left: 25rpx;
width: 45%;
height: 350rpx;
}

js

//初始化画板 - 微信小程序 canvas 2D
drawing(){
//定义全局canvas
const query = wx.createSelectorQuery();
query
.select('#canvas')
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node;
this.canvasObj=canvas;
const ctx = canvas.getContext('2d');
const dpr = wx.getSystemInfoSync().pixelRatio;
canvas.width = res[0].width * dpr;
canvas.height = res[0].height * dpr;
this.canvasWidth=res[0].width * dpr;
this.canvasHeight = res[0].height * dpr;
ctx.scale(dpr, dpr);
// 填充一个白色矩形
ctx.fillStyle ='white';
ctx.fillRect(8, 55, 345,425);
//头部图片
const headerImg = canvas.createImage();
headerImg.src = this.TopList.product_image_url;
headerImg.onload = () => {
ctx.drawImage(headerImg, 83, 65, 200, 186);
};
// 标题
ctx.fillStyle ='#333333';
ctx.font = 'normal bold 15px sans-serif';
ctx.fillText(this.TopList.brand_name+" | "+this.TopList.gpc_product.FNAME+" | "+this.TopList.gpc_product.FSPECIFICATION, 20, 270);
// 二维码
const QRcodeImg = canvas.createImage();
QRcodeImg.src = this.QRcodeImg;
QRcodeImg.onload = () => {
ctx.drawImage(QRcodeImg, 215, 345, 124.5, 130);
};
//logo
const logoImg = canvas.createImage();
logoImg.src = this.logoImg;
logoImg.onload = () => {
ctx.drawImage(logoImg, 25, 345, 180, 80);
};
})
},

截图保存分享

//下载画板生成图片
uploads() {
var that = this;
var timer
= setTimeout(function(){
wx.canvasToTempFilePath({
x: 8,
y: 55,
width: 345,
height: 425,
destWidth: this.canvasWidth,
destHeight: this.canvasHeight,
canvas: that.canvasObj,
success(res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function (data) {
wx.showToast({
title: '保存成功，快去分享吧',
icon: 'none',
duration: 2000
});
that.showCanvas=false;
that.showCanvasCSS="container2";
clearTimeout(timer);
},
fail: function (error) {
console.log(error)
wx.showToast({
title: '很遗憾，保存失败',
icon: 'none',
duration: 2000
})
clearTimeout(timer)
}
})
}
})
},1000)
}

注：需要注意的是，对于Canvas画板需要隐藏/显示，运用wx:if 、v-if、v-show、hidden都不可行，解决方案为将canvas设置定位，比如，然后指定left一个比较大的值，让canvas的显示超出屏幕范围。

<canvas canvas-id='canOne' class='canOne' style='width:1080px;height:1643px;position:fixed;left:9000px;'></canvas>

微信小程序 Canvas 旧版API的绘图使用 鉴转载：
 

https://blog.csdn.net/javascript411/article/details/95466716

最后

以上就是强健店员为你收集整理的微信小程序 Canvas 画板使用,踩坑记录HtmlCSSjs的全部内容，希望文章能够帮你解决微信小程序 Canvas 画板使用,踩坑记录HtmlCSSjs所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。