动态效果图如下:
首页源码如下:
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社区 其它相关文章!