详细讲解微信小程序画布圆角矩形的绘制方法

微信小程序通过设置边框半径，可以让普通元素画出圆角，但有时候用画布画的时候，也需要圆角。例如，当页面上的某个区域需要导出为图片并在本地下载时，常见的解决方案是用画布绘制这个区域，最后导出画布。但是canvas没有直接提供画圆角的api，所以需要曲线来拯救国家。

圆角矩形和一般矩形的区别在于前者的四个角是圆弧，所以你只需要把一般矩形的四个角切掉，换成圆弧即可。下图显示了一个四角被切掉的普通矩形：

很明显，四个角的矩形被切掉了，剩下的其实是四条线。在这种情况下，可以跳过画矩形和切角的步骤，因为切角的结果是四条线，所以可以直接画四条边。然后画一个弧度为0.5 * Math的圆弧。每两条边缺角处的圆周率，最后这四条边和四条弧围成的图形是一个圆角矩形：

当原理已知时，代码很容易编写。这里只有几点需要注意：

封闭图形的填充样式颜色设置为透明

如果要绘制闭合路径图，需要调用描边或填充方法。笔画或填充的默认颜色是黑色，但这里有一个问题。弧形图中可能有锯齿状或模糊的边缘。如果笔画或填充的颜色与你需要画的圆角矩形的边缘颜色不一致，边缘被涂抹的感觉会比两者颜色一致更明显。下图中第一个是相同的颜色，第二个是不一致的颜色：

但据我观察，只要不是特意放大仔细看，不管色调是否一致，其实一般人很难注意到贴边的事

夹子

绘制圆角选区后，需要调用ctx.clip方法来裁剪选区

保存和恢复

如果这个矩形选择只是画布的一部分，为了避免后续的影响，最好在beginPath路径之前保存之前的动作，然后在绘制之后恢复

一个关于在画布上绘制圆形图片并在本地下载的可运行示例代码已经放在github上，注释也很详细，所以你可以取你需要的东西。

关键代码如下：

/* * * * @param {number} h圆角矩形选区的高度* @param {number} r圆角的半径*/函数roundrect (CTX、x、y、w、h、r){//开始绘制ctx.beginPath() //因为边缘笔画中有锯齿。最好指定透明填充。//这里可以使用填充或描边，两者都可以是CTX.setfillstyle('透明')//CTX.setstrokestyle('透明')//ctx.arc(x r，Y r，R，math.pi，math.pi * 1.5)//border-topctx . move to(x R，y) ctx.lineto (x w-r，y) ctx.lineto (x w，y r)//ctx.arc(x w-r，y r，R，Math . pi * 1.5PI * 0.5，math . PI)//border-left CTX . line to(x，y r) ctx.lineto (x r，y)//此处可以使用填充或描边，但需要对应ctx.fill ()//ctx .描边()ctx.closepath()

canvas style=' width: 400px高度： 400 px；border:1px纯红' canvas-id=' first canvas '/canvas//index . js page({ data : { image : { src : '/1 . png '，width: 200，heigth: 200 } }，onload 3360 function(){ let that=this；var contex=wx . createcanvascontext(' first canvas ')contex . save()；//使用contex.beginPath()前保存画圆的状态；//开始画//先画一个圆contex.arc (100，100，100，0，math.pi * 2，false)；contex . clip()；//画一个圆，把原来的画布剪成任何形状和大小。一旦一个区域被切割，所有后续的图纸将被限制在切割区域内容。绘制图像(即。数据。图像。src，0，0，那个。数据。图像。宽度，那个。数据。图像。高度)；//前进到图片contex . restore()；//恢复先前保存的图形的上下文。下午和下午恢复之前保存的绘图状态，继续绘制contex . draw()；}})以上就是本文的全部内容，希望对大家的学习有所帮助，支持我们。