教你小程序系列教程：
1.教你：微信小程序如何实现scroll-view隐藏滚动条
2.教你：如何使用scroll-view组件实现视图垂直滚动（附源码）
3.教你：小程序如何使用swiper组件实现图片切换（附源码）
4.教你：微信小程序中如何设置拨打电话（附源码）
5.教你：如何打开小程序如何打开微信自带的地图（附源码） 
6. 教你：如何使用小程序画布组件绘制自动缩放正方形（附源码）
7. 教你：如何使用微信小程序video组件播放视频（附源码）

8. 教你：如何使用小程序画布组件绘制一个会自动旋转正方形



小程序的组件有很多，我们教你小程序系列教程就是将每个组件就细分一个小的源码程序给大家演示出来，希望大家看的更直观。画布组件是小程序组件中使用率比较高的组件之一，之前我们也介绍过如何使用画布组件绘制自动缩放的正方形，今天我们介绍使用画布组件绘制自动旋转的正方形。

效果图如下：


主要的代码如下：

{

  "pages":[

    "copyright/copyright",

    "pages/index/index",

    "pages/logs/logs"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "51小程序画布-旋转效果",

    "navigationBarTextStyle":"black"

  }

}

Page({

  onReady:function(e){

    var cxt_rotate = wx.createContext();//创建并返回绘图上下文context对象。

    var rotate=0;//默认旋转角度为为0

    setInterval(function(){ //无限循环定时函数    

      cxt_rotate.translate(150,100);//设置坐标系坐标

      rotate++;//旋转角度自增1

      cxt_rotate.rotate(rotate*Math.PI/180)//设置旋转的角度

      cxt_rotate.rect(0,0,50,50)//设置坐标(0,0)，相对于坐标系坐标，边长为为50px的正方形

      cxt_rotate.stroke();//对当前路径进行描边

      wx.drawCanvas({

      canvasId:'canvasAutoRotate',//画布标识，对应的cavas-id

      actions:cxt_rotate.getActions()//导出context绘制的直线并显示到页面

    });

    },1)    

  }

})

本次教程的源码如下：
使用画布组件绘制一个会自动旋转的正方体.rar爱盈利（aiyingli.com）移动互联网最具影响力的盈利指导网站。定位于服务移动互联网创业者，移动盈利指导。我们的目标是让盈利目标清晰可见！降低门槛，让缺乏经验、资金有限的个人和团队获得经验和机会，提高热情，激发产品。