微信小程序允許對(duì)普通元素通過(guò) border-radius 的設(shè)置來(lái)進(jìn)行圓角的繪制，但有時(shí)候在使用 canvas 繪圖的時(shí)候，也需要圓角，例如需要將頁(yè)面上某塊區(qū)域?qū)С鰹閳D片下載到本地的時(shí)候，常用的解決方法就是使用 canvas 將這塊區(qū)域繪制出來(lái)，最后導(dǎo)出 canvas 即可，但是 canvas 沒(méi)有直接提供圓角的繪制 api ，所以需要 曲線救國(guó)

成都創(chuàng)新互聯(lián)公司是一家以網(wǎng)絡(luò)技術(shù)公司，為中小企業(yè)提供網(wǎng)站維護(hù)、網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站、網(wǎng)站備案、服務(wù)器租用、空間域名、軟件開(kāi)發(fā)、微信平臺(tái)小程序開(kāi)發(fā)等企業(yè)互聯(lián)網(wǎng)相關(guān)業(yè)務(wù)，是一家有著豐富的互聯(lián)網(wǎng)運(yùn)營(yíng)推廣經(jīng)驗(yàn)的科技公司，有著多年的網(wǎng)站建站經(jīng)驗(yàn)，致力于幫助中小企業(yè)在互聯(lián)網(wǎng)讓打出自已的品牌和口碑，讓企業(yè)在互聯(lián)網(wǎng)上打開(kāi)一個(gè)面向全國(guó)乃至全球的業(yè)務(wù)窗口：建站歡迎聯(lián)系：18982081108

圓角矩形與一般矩形的區(qū)別在于，前者的四個(gè)角都是圓弧，所以只需要將一般矩形的四個(gè)角切掉，換成圓弧即可，如下圖就是一個(gè)一般矩形被切掉了四個(gè)角的樣子：

很明顯，切掉了四個(gè)角的矩形，剩下其實(shí)就是四條 line ，既然如此，完全可以跳過(guò)繪制矩形然后切角這一步，因?yàn)榍薪堑慕Y(jié)果就是四條邊( line )，直接繪制四條邊即可。 然后在每?jī)蓷l邊的缺角處繪制弧度為 0.5 * Math.PI 的圓弧，最后這四條邊與四個(gè)圓弧所封閉的圖形就是圓角矩形：

原理知道了，代碼就很好寫(xiě)了，這里只說(shuō)幾個(gè)注意點(diǎn)：

封閉圖形的 fillStyle 顏色設(shè)置為 transparent

想將封閉路徑的圖形繪制下來(lái)，需要調(diào)用 stroke 或 fill 方法，默認(rèn) stroke 或 fill 的顏色是 black ，但是這里有個(gè)問(wèn)題， 圓弧的繪制可能會(huì)出現(xiàn)鋸齒或者糊邊，如果 stroke 或 fill 的顏色，與你所需要繪制的圓角矩形的邊緣色調(diào)不一致，這種糊邊的感覺(jué)會(huì)比二者色調(diào)一致的更明顯， 下圖第一個(gè)為色調(diào)一致，第二個(gè)為色調(diào)不一致的情況：

不過(guò)據(jù)我觀測(cè)，只要不是特意放大仔細(xì)看，無(wú)論是色調(diào)是否一致，其實(shí)一般人很難注意到糊邊的事情

clip

繪制好了圓角選區(qū)之后，還需要調(diào)用 ctx.clip 方法來(lái)裁剪選區(qū)

save 與 restore

如果這個(gè)矩形選區(qū)只是 canvas 畫(huà)布的一部分，為了避免對(duì)后續(xù)的影響，最好在 beginPath 之前，將之前的動(dòng)作 save ，然后畫(huà)完后再 restore

一個(gè)關(guān)于 在 canvas 上繪制圓角圖片，并下載到本地的可運(yùn)行示例代碼已經(jīng)放到 github 上了，注釋也比較詳細(xì)，需要的可自取

其中關(guān)鍵代碼如下：

/**
 * 
 * @param {CanvasContext} ctx canvas上下文
 * @param {number} x 圓角矩形選區(qū)的左上角 x坐標(biāo)
 * @param {number} y 圓角矩形選區(qū)的左上角 y坐標(biāo)
 * @param {number} w 圓角矩形選區(qū)的寬度
 * @param {number} h 圓角矩形選區(qū)的高度
 * @param {number} r 圓角的半徑
 */
function roundRect(ctx, x, y, w, h, r) {
 // 開(kāi)始繪制
 ctx.beginPath()
 // 因?yàn)檫吘壝柽叴嬖阡忼X，最好指定使用 transparent 填充
 // 這里是使用 fill 還是 stroke都可以，二選一即可
 ctx.setFillStyle('transparent')
 // ctx.setStrokeStyle('transparent')
 // 左上角
 ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)

 // border-top
 ctx.moveTo(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.5, Math.PI * 2)

 // border-right
 ctx.lineTo(x + w, y + h - r)
 ctx.lineTo(x + w - r, y + h)
 // 右下角
 ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)

 // border-bottom
 ctx.lineTo(x + r, y + h)
 ctx.lineTo(x, y + h - r)
 // 左下角
 ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)

 // border-left
 ctx.lineTo(x, y + r)
 ctx.lineTo(x + r, y)

 // 這里是使用 fill 還是 stroke都可以，二選一即可，但是需要與上面對(duì)應(yīng)
 ctx.fill()
 // ctx.stroke()
 ctx.closePath()
 // 剪切
 ctx.clip()
}

ps：微信小程序canvas把正方形圖片繪制成圓形

<canvas  canvas-id="firstCanvas"></canvas>

//index.js
Page({
 data: {
  image: {
   src: "/1.png",
   width: 200,
   heigth: 200
  }
 },
 onLoad: function () {
  let that = this;
  var contex = wx.createCanvasContext('firstCanvas')
  contex.save(); // 先保存狀態(tài) 已便于畫(huà)完圓再用
  contex.beginPath(); //開(kāi)始繪制
  //先畫(huà)個(gè)圓
  contex.arc(100, 100, 100, 0, Math.PI * 2, false);
  contex.clip();//畫(huà)了圓 再剪切 原始畫(huà)布中剪切任意形狀和尺寸。一旦剪切了某個(gè)區(qū)域，則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi)
  contex.drawImage(that.data.image.src, 0, 0, that.data.image.width, that.data.image.heigth); // 推進(jìn)去圖片
  contex.restore(); //恢復(fù)之前保存的繪圖上下文 恢復(fù)之前保存的繪圖上下午即狀態(tài) 可以繼續(xù)繪制
  contex.draw();
 }
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前名稱(chēng)：詳解微信小程序canvas圓角矩形的繪制的方法
文章位置：http://www.chinadenli.net/article33/pegess.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、、全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站策劃、服務(wù)器托管、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)