위챗 미니 프로그램 캔버스 개발 시 주의사항을 소개합니다.

미니 프로그램 개발 튜토리얼캔버스 개발 시 주의사항을 소개하는 칼럼

관련 학습 추천: 미니 프로그램 개발 튜토리얼

WeChat 미니 프로그램 wxcanvas

테스트 전화는 IPHONE6, 개발자 도구 버전 0.10.102800입니다. 개발자 도구 버전 0.11.112301도 마찬가지입니다

WeChat 애플릿의 캔버스는 h5 캔버스와 여러 면에서 다릅니다. 이하 WeChat 애플릿의 캔버스를 wxcanvas라고 합니다

다음은 모두 유용한 정보입니다. 조금씩 테스트했습니다. 인내심을 갖고 지켜보세요.

1.wxcanvas에는 h5canvas와 같은 너비 및 높이 속성과 너비 및 높이 스타일이 없습니다.

2. wxcanvas를 실제 H5canvas로 생각하지 말고, 너비와 높이를 변경하는 것들도 존재합니다. 즉, 여기에 다시 그리기가 있지만 구체적으로 구현하는 방법을 모르겠습니다.

3. wxcanvas 스타일의 너비와 높이를 변경해도 원본 캔버스에 있는 항목의 크기는 변경되지 않습니다.

4. CSS 변환 변환의 변경 큰 축소는 원본 캔버스에 있는 항목의 크기를 변경할 수 없습니다

5. 공식 설명: 컨텍스트는 메서드 호출을 기록하는 컨테이너일 뿐이며 그리기 동작을 기록하는 작업 배열을 생성하는 데 사용됩니다. 컨텍스트와 사이에는 대응 관계가 없습니다. 컨텍스트 생성 캔버스의 그리기 작업 배열은 여러 에 적용될 수 있습니다.

실제로 context.getActions() 후에 컨텍스트의 정보가 지워집니다. 이를 재사용하려면 wx에서 재사용하기 전에 작업 배열을 저장하기 위해 var temp=context.getActions()가 필요합니다. .drawcanvas;

6. 참고

wx.drawCanvas({
　　canvasId: 'target',
　　actions: context.getActions()
});

wx.drawCanvas({
  canvasId: 'target',
  actions: context.getActions(),
  reserve:true
});

7. 비활성화-스크롤="true"와 바인딩터치무브="cvsMove"가 동시에 존재합니다. 페이지 이동을 방지하기 위해 catchtouchmove가 작동하지 않습니다위의 작성에서는 ccvsMove와 cvsMove가 모두 실행됩니다.

위 내용은 위챗 미니 프로그램 캔버스 개발 시 주의사항을 소개합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!