12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- // customized/pages/canvas/canvas.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)
- },
- /**
- * 页面的初始数据
- */
- data: {
- },
- /**
- * 生命周期函数--监听页面加载
- */
- onLoad: function (options) {
- },
- /**
- * 生命周期函数--监听页面初次渲染完成
- */
- onReady: function () {
- },
- /**
- * 生命周期函数--监听页面显示
- */
- onShow: function () {
-
- let ctx = wx.createCanvasContext('fontBox');
- ctx.setFontSize(20);
- let rotate = 0
-
- // setInterval(()=>{
- // rotate++;
- // ctx.translate(0, 0)
- ctx.rotate(rotate * Math.PI / 180);
-
- console.log(rotate)
- ctx.fillText('abcdefg', 0, 0);
- // },2000)
-
- ctx.draw();
- },
- })
|