미니 프로그램 캔버스 구성 요소를 사용하여 자동 크기 조정 사각형 기능 그리기

모바일 트래픽 페이지를 보면 굉장히 공상과학처럼 보이는 다양한 변화하는 그래픽을 오랫동안 보고 계시다면 어지러움을 느끼실 것입니다. 그렇다면 이 사진은 어떻게 만들어지는 걸까요? 오늘은 미니 프로그램 캔버스 컴포넌트를 사용하여 자동 크기 조정 정사각형을 그리는 방법을 간략하게 보여드리겠습니다.
1. 페이지에 정사각형 이미지가 표시됩니다.
2. 사각형이 점차 확대됩니다.

동적렌더링은 다음과 같습니다.

홈페이지 소스코드는 다음과 같습니다.

<view class="copyright">
    <view class="copyright_item">CopyRight：All Right Reserved</view>
    <view class="copyright_item">原创作者：html51.com</view>
    <view class="copyright_item">微信小程序开发者社区：51小程序</view>
    <view class="copyright_item"><image class="img" src="../copyright/image/logo.png"/></view>
    <view class="goto_counter"><button type="default" bindtap="goto_counter">点击进入图形缩放页面</button></view>
</view>

Some 중요한 코드는 다음과 같습니다:

Page({
  onReady:function(e){
    var cxt_scale = wx.createContext();//创建并返回绘图上下文context对象。
    var scale=0;//默认缩放倍数为0，大于0为放大，小于0位缩小
    setInterval(function(){ //无限循环定时函数 
      scale+=0.5;// 向缩小后放大
      if(scale==10){//但放大位数为10倍时，设置放大倍数为1
        scale=1
      }
      cxt_scale.scale(scale,scale)//对横纵坐标进行缩放
      cxt_scale.rect(0,0,10,10)//边长为为10px的正方形
      cxt_scale.stroke();//对当前路径进行描边
      wx.drawCanvas({
      canvasId:&#39;canvasAutoScale&#39;,//画布标识，对应<canvas/>的cavas-id
      actions:cxt_scale.getActions()//导出context绘制的直线并显示到页面
    });
    },200)   
  }
})

위 내용은 미니 프로그램 캔버스 구성 요소를 사용하여 자동 크기 조정 사각형 기능 그리기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!