首页 > PHP资讯 > 工具库 > 使用小程序画布组件绘制自动缩放正方形功能

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

工具库
大家在手机流量页面的时候,应该也看到过各种看起来很科幻的各种变化的图形,看久了就会出现眩晕的感觉。那么这种图片是怎么做出来的呢?今天我们就给大家简单演示一下,如何使用小程序画布组件绘制自动缩放正方形
1.页面显示正方形图片。
2.正方形逐渐放大。

动态效果图如下:

首页源码如下:

    CopyRight:All Right Reserved    原创作者:html51.com    微信小程序开发者社区:51小程序        


部分重要代码如下:

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',//画布标识,对应的cavas-id      actions:cxt_scale.getActions()//导出context绘制的直线并显示到页面    });    },200)     }})

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

工具库

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持22不支持0