微信小程序canvas把正方形图片绘制成圆形

时间：2024-02-25 10:25:19

wxml代码：

<view class="result-page">
 <canvas canvas-id=\'firstCanvas\' style=\'width:100%;height:500px;margin: 0;padding: 0;display: block;background-color:#eeeeee\'></canvas>
  <view class=\'footer\'>
    <view class=\'btn-layout\'>
      <button class=\'btn-pierced btn-width\' bindtap="returnIndex">换个名字测</button>
    </view>
    <view class=\'btn-layout\'>
      <button class=\'btn btn-layout btn-width\' bindtap="saveImage">保存图片</button>
    </view>
  </view>
</view>

js代码：

var contex = wx.createCanvasContext(\'firstCanvas\')
    var avatarurl_width = 100;    //绘制的头像宽度
    var avatarurl_heigth = 100;   //绘制的头像高度
    var avatarurl_x = 50;   //绘制的头像在画布上的位置
    var avatarurl_y = 50;   //绘制的头像在画布上的位置
    contex.save();

    contex.beginPath(); //开始绘制
    //先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
    contex.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);

    contex.clip();//画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
    
    contex.drawImage(\'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2369419058,1797305489&fm=27&gp=0.jpg\', avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片，必须是https图片

    contex.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制

    contex.draw(); //可将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中

 原图地址：

 
实现效果：

相关文章