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

最新推荐文章于 2024-01-02 17:13:44 发布

原创

最新推荐文章于 2024-01-02 17:13:44 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

使用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  r