微信小程序canvas基础图文案例

欢迎各个领域的程序员 不管是学生还是上班了的 还是小白加入讨论交流群，大家一起讨论交流学习951701316，有内推工作的也会优先群里的朋友，群号951701316

微信小程序canvas图文效果

wxml页面代码

canvas-id是一定要写的，新建画布的id跟后面js相对应。

<!-- canvas—id一定要写。跟后面的js相对应，style设置画布的宽高 -->
<canvas canvas-id='canvas' style='width:100%;height:100vh'></canvas>

js代码，最重要的。

创建画布的实例 这里的canvas就是之前定义canvas-id

var context = wx.createCanvasContext('canvas');

添加图像 （图片路径，x轴坐标，y轴坐标，图像的宽，图像的高）我们这里图像等于系统的宽高，并且从左上角开始绘制

context.drawImage(that.data.imgPath, 0, 0, e.windowWidth, e.windowHeight);

设置字体大小以及颜色

context.setFontSize(16);
context.fillStyle = "#ffffff";

设置文本文字 （第一个是文本内容，第二个文本的x轴，第三个是文本的y轴，第四个是文本的宽度，可写可不写），文本的xy轴是从文本的左下角开始绘制的

context.fillText("这个是测试的文字", 20, 20);

开始绘制！

context.draw();

js部分的所有代码

// pages/haibaodemo/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // imgPath: "/images/common/chuzu.jpg",
    // 网上的图片和本地的图片都能用！
    imgPath: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541676801282&di=f98d26a575785f801ba5dec000d12d88&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F10dfa9ec8a136327f1be7a0f9a8fa0ec08fac7bf.jpg",
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this;
    wx.getSystemInfo({
      success: function(e) {
        var context = wx.createCanvasContext('canvas');
        context.drawImage(that.data.imgPath, 0, 0, e.windowWidth, e.windowHeight);
        context.setFontSize(16);
        context.fillStyle = "#ffffff";
        context.fillText("这是个测试文字", 20, 20);
        context.draw();
      },
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

如果您还是运行不出来可以找我。

欢迎各个领域的程序员 不管是学生还是上班了的 还是小白加入讨论交流群，大家一起讨论交流学习951701316，有内推工作的也会优先群里的朋友，群号951701316