微信小程序利用canvas,绘制海报中圆形的头像

使用canvas实现如下效果图

在这里插入图片描述

  • 使用微信小程序官方canvas API,需要进一步了解可以查看参考文档,这里不加以重复直接上代码

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
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值