微信小程序canvas 使用案例(一)

一、cavans 对象获取、上线文创建

1.wxml

 <!-- canvas.wxml -->
 <canvas type="2d" id="myCanvas"></canvas>

2.js


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {


    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        //分辨率处理
        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr)
        ctx.fillRect(0, 0, 100, 100);
      })

  },

3.css 代码忽略

结果:

更多:

微信小程序数组绑定使用案例(二)

微信小程序数组绑定使用案例(一)

input组件 type为nickname pc端获取不到这个绑定的值?

相关推荐

  1. 程序canvas手写签字

    2024-07-21 10:46:02       48 阅读
  2. 程序canvas绘实现贴纸效果

    2024-07-21 10:46:02       46 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-21 10:46:02       52 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-21 10:46:02       54 阅读
  3. 在Django里面运行非项目文件

    2024-07-21 10:46:02       45 阅读
  4. Python语言-面向对象

    2024-07-21 10:46:02       55 阅读

热门阅读

  1. 录入学生信息

    2024-07-21 10:46:02       17 阅读
  2. 分布式ID是什么?有哪些解决方案?

    2024-07-21 10:46:02       16 阅读
  3. 【c++】c++新概念“列表”

    2024-07-21 10:46:02       13 阅读
  4. test_demo

    2024-07-21 10:46:02       15 阅读
  5. C语言MAX_PATH和PATH_MAX的区别

    2024-07-21 10:46:02       14 阅读
  6. jEasyUI 创建简单窗口

    2024-07-21 10:46:02       17 阅读
  7. TMS320F28335多级中断及中断响应过程

    2024-07-21 10:46:02       13 阅读
  8. 微信小程序反编译工具安装【PC端程序包详解】

    2024-07-21 10:46:02       15 阅读
  9. 磁盘IO挂起(Disk IO hang)

    2024-07-21 10:46:02       15 阅读
  10. 昇思22天

    2024-07-21 10:46:02       13 阅读