위 챗 애플 릿 canvas 원 각 사각형 그리 기 방법

위 챗 애플 릿 은 일반 요소border-radius의 설정 을 통 해 원 각 을 그 릴 수 있 습 니 다.그러나 가끔 은canvas그림 을 그 릴 때 도 원 각 이 필요 합 니 다.예 를 들 어 페이지 의 한 구역 을 그림 으로 내 보 내 고 로 컬 에 다운로드 해 야 할 때 자주 사용 하 는 해결 방법 은canvas을 사용 하여 이 구역 을 그 려 내 고 마지막 으로 내 보 내기canvas하면 됩 니 다.그러나canvas원 각 그리 기api를 직접 제공 하지 않 았 기 때문에 필요 합 니 다 원 각 사각형 과 일반 사각형 의 차 이 는 전자의 네 각 이 모두 원호 이기 때문에 일반 사각형 의 네 각 을 자 르 고 원호 로 바 꾸 면 된다 는 것 이다.아래 그림 과 같이 일반 사각형 이 네 각 으로 잘 린 모습 이다.

네 개의 각 을 자 른 사각형 이 뚜렷 하고 나머지 는 네 개의 변line이다.그렇다면 사각형 을 그리고 각 을 자 르 는 단 계 를 뛰 어 넘 을 수 있다.각 을 자 른 결 과 는 네 개의 변line이 고 네 개의 변 을 직접 그리 면 되 기 때문이다.그 다음 에 각 두 변 의 부족 한 각 에 라디안0.5 * Math.PI의 원 호 를 그립 니 다.마지막 으로 이 네 변 과 네 개의 원호 가 닫 힌 도형 은 바로 원 각 사각형 입 니 다.

원 리 를 알 면 코드 를 잘 쓸 수 있 습 니 다.여기 서 몇 가지 주의 점 만 말씀 드 리 겠 습 니 다.
폐쇄 된 도형fillStyle색상 설정transparent폐쇄 된 경 로 를 그 리 려 면stroke또는fill방법 을 사용 해 야 합 니 다.기본stroke또는fill색상 은black입 니 다.그러나 문제 가 있 습 니 다.원호 의 그리 기 는 톱날 이나 가장자리 가 생 길 수 있 습 니 다.stroke또는fill색상 이 원 각 사각형 의 가장자리 색상 과 일치 하지 않 으 면,이런 테두리 에 바 르 는 느낌 은 양자 색조 가 일치 하 는 것 보다 더욱 뚜렷 하 다.아래 그림 의 첫 번 째 는 색조 가 일치 하고 두 번 째 는 색조 가 일치 하지 않 는 경우 이다.


그러나 내 관측 에 따 르 면 특별히 확대 하지 않 고 자세히 보면 색조 가 일치 하 든 그렇지 않 든 사실 일반인 들 은 가장자리 에 바 르 는 일 을 알 아차 리 기 어 려 울 것 이다.clip원 각 선택 영역 을 그린 후에 선택 영역 을 자 르 는 방법ctx.clip을 사용 해 야 합 니 다.save와restore만약 에 이 사각형 선택 구역 이canvas캔버스 의 일부분 일 뿐 이 라면 후속 적 인 영향 을 피하 기 위해beginPath전에 이전의 동작save을 그 린 다음 에 그 린 다음 에restore하 는 것 이 좋다.canvas에 원 각 그림 을 그리고 로 컬 에 다운로드 할 수 있 는 실행 가능 한 예제 코드 가github에 올 라 갔 습 니 다.주석 도 상세 하고 필요 한 것 은 스스로 찾 을 수 있 습 니 다.
그 중에서 관건 적 인 코드 는 다음 과 같다.

/**
 * 
 * @param {CanvasContext} ctx canvas   
 * @param {number} x            x  
 * @param {number} y            y  
 * @param {number} w          
 * @param {number} h          
 * @param {number} r      
 */
function roundRect(ctx, x, y, w, h, r) {
 //     
 ctx.beginPath()
 //           ，       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   ，     ，         
 ctx.fill()
 // ctx.stroke()
 ctx.closePath()
 //   
 ctx.clip()
}

ps:위 챗 애플 릿 canvas 는 정사각형 그림 을 원형 으로 그립 니 다.

<canvas style="width: 400px; height: 400px;border:1px solid red" 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(); //               
  contex.beginPath(); //    
  //    
  contex.arc(100, 100, 100, 0, Math.PI * 2, false);
  contex.clip();//                      。         ，                     
  contex.drawImage(that.data.image.src, 0, 0, that.data.image.width, that.data.image.heigth); //      
  contex.restore(); //                                   
  contex.draw();
 }
})

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.