canvas-将方形绘制为圆形

最新推荐文章于 2022-10-17 15:55:54 发布

bie-bie

最新推荐文章于 2022-10-17 15:55:54 发布

阅读量460

点赞数 1

CC 4.0 BY-SA版权

分类专栏： canvas

原文链接：https://www.cnblogs.com/-mrl/p/9072009.html

canvas 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用微信小程序的Canvas API实现头像的圆形裁剪效果，通过绘制圆形并将其作为剪切路径，再将指定的头像图片绘制在画布上，最终达到圆形头像的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

换个名字测保存图片

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 中

转载自：https://www.cnblogs.com/-mrl/p/9072009.html