canvas.js 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. // customized/pages/canvas/canvas.js
  2. Page({
  3. onReady: function (e) {
  4. var cxt_rotate = wx.createContext();//创建并返回绘图上下文context对象。
  5. var rotate = 0;//默认旋转角度为为0
  6. setInterval(function () { //无限循环定时函数
  7. cxt_rotate.translate(150, 100);//设置坐标系坐标
  8. rotate++;//旋转角度自增1
  9. cxt_rotate.rotate(rotate * Math.PI / 180)//设置旋转的角度
  10. cxt_rotate.rect(0, 0, 50, 50)//设置坐标(0,0),相对于坐标系坐标,边长为为50px的正方形
  11. cxt_rotate.stroke();//对当前路径进行描边
  12. wx.drawCanvas({
  13. canvasId: 'canvasAutoRotate',//画布标识,对应的cavas-id
  14. actions: cxt_rotate.getActions()//导出context绘制的直线并显示到页面
  15. });
  16. }, 1)
  17. },
  18. /**
  19. * 页面的初始数据
  20. */
  21. data: {
  22. },
  23. /**
  24. * 生命周期函数--监听页面加载
  25. */
  26. onLoad: function (options) {
  27. },
  28. /**
  29. * 生命周期函数--监听页面初次渲染完成
  30. */
  31. onReady: function () {
  32. },
  33. /**
  34. * 生命周期函数--监听页面显示
  35. */
  36. onShow: function () {
  37. let ctx = wx.createCanvasContext('fontBox');
  38. ctx.setFontSize(20);
  39. let rotate = 0
  40. // setInterval(()=>{
  41. // rotate++;
  42. // ctx.translate(0, 0)
  43. ctx.rotate(rotate * Math.PI / 180);
  44. console.log(rotate)
  45. ctx.fillText('abcdefg', 0, 0);
  46. // },2000)
  47. ctx.draw();
  48. },
  49. })