微信小程序利用canvas，绘制海报中圆形的头像
发布时间
阅读量：
阅读量
使用canvas实现如下效果图
- 通过官方提供的Canvas开发接口进行小程序开发
- 如需深入了解如何使用此功能，请访问参考文档
- 为避免冗长，在此直接提供代码示例
canvas.wxml
<view>
<canvas class="firstCanvas _6a4ef3a" style="width:{{windowWidth}}px;height:{{windowHeight}}px;" canvas-id="firstCanvas" bindlongtap="generate"/>
</view>canvas.js
let promiseAvatar=null; //定义暂存头像的function
const ctx = wx.createCanvasContext('firstCanvas'); //定义画图常量
Page({
/** * 页面的初始数据
*/
data: {
windowHeight:0,
windowWidth:0
rate:0 //适配参数
},
methods:{
//获取设备参数
getWindowInfo() {
let {windowWidth，windowHeight} = wx.getSystemInfoSync()；
let rate = windowWidth / 750;
this.setData({windowWidth,windowHeight,rate})
},
getUserAvatar(){
let userInfo=wx.getStorageSync('userInfo),
userAvatar=userInfo.avatarUrl,promiseAvatar;
return new Promise(function (resolve, reject) {
wx.getImageInfo({
src: userAvatar,
success: function (res) {
resolve(res);
},
fail: function (res) {
reject(res);
}
});
},
async drawImage(){
let {rate} = this.data;
let res = await getUserAvatar();
// 因为这个是其他的画报中截取的片段，所以这里要先保存一下
// 大致的实现步骤rate
// 绘制一个圆进行截切 ctx.clip()
// 最后填充图片
ctx.save(); //保存原有的画图
ctx.beginPath() //重新开始
ctx.arc( //绘制圆心坐标为(350,132),半径为66的圆
Math.floor(375 * rate),
Math.floor(132 * rate),
Math.floor(66 * rate),
0,
2 * Math.PI
);
ctx.clip() //裁剪
ctx.drawImage( //定位在圆圈范围内便会出现
res[0].path, //图片暂存路径
Math.floor(310 * rate),
Math.floor(66 * rate),
Math.floor(132 * rate),
Math.floor(132 * rate)
);
ctx.restore()
ctx.draw()
}
}
onShow(){
this.getWindowInfo();
this.drawImage();
}
})在处理图片时需要注意的是，在实际应用中可能会遇到一些特殊需求或限制条件。如果遇到网络资源的情况，则必须将图片先下载至临时存储路径后才能进行后续操作；可以通过调用wx.downloadFile方法来完成这一过程；然后绘制图像时使用的路径即为该方法返回的具体路径；其中文件的下载域名需预先在微信后台进行相应的配置以确保正常运行
全部评论 (0)
还没有任何评论哟~