欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  微信小程序

使用小程序画布组件绘制自动缩放正方形功能

程序员文章站 2022-03-09 20:21:51
...
大家在手机流量页面的时候,应该也看到过各种看起来很科幻的各种变化的图形,看久了就会出现眩晕的感觉。那么这种图片是怎么做出来的呢?今天我们就给大家简单演示一下,如何使用小程序画布组件绘制自动缩放正方形
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:'canvasAutoScale',//画布标识,对应<canvas/>的cavas-id
      actions:cxt_scale.getActions()//导出context绘制的直线并显示到页面
    });
    },200)   
  }
})

以上就是使用小程序画布组件绘制自动缩放正方形功能的详细内容,更多请关注其它相关文章!

相关标签: 小程序