ミニプログラムキャンバスコンポーネントを使用して自動スケーリング二乗関数を描画します

モバイルトラフィックのページを見ると、非常にSF的なさまざまなグラフィックが変化するのを目にしたことがあるはずです。長時間見ているとめまいを感じます。では、このような写真をどうやって作っているのでしょうか？今日は、ミニ プログラム キャンバス コンポーネントを使用して自動スケーリング正方形を描画する方法について簡単なデモを行います
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>

いくつかの重要なコードは次のとおりです:

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 中国語 Web サイトの他の関連記事を参照してください。