您的位置:首页 > 移动开发 > 微信开发

微信小程序例子——使用画布组件绘制一个会自动旋转的正方体

2016-10-26 22:04 1166 查看
1、效果展示



2、关键代码

index.wxml

empty


index.js

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)
}
})


3、源代码获取方式

百度云链接:http://pan.baidu.com/s/1hs4sqOW

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)
}
})
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息