关于微信小程序前端Canvas组件教程

关于微信小程序前端Canvas组件教程

微信小程序Canvas接口函数

​ 上述为微信小程序Canvas的内部接口，通过熟练使用Canvas，即可画出较为美观的前端页面。下面是使用微信小程序画图的一些例子。

微信小程序画图实例

基本步骤

wxml中代码：

 <canvas canvas-id="myCanvas" class="myCanvas" ></canvas>

js中onLoad()函数

const ctx = wx.createCanvasContext('myCanvas')//创建Canvas
ctx.setFillStyle('green')//选择填充颜色
ctx.fillRect(10, 10, 150, 75)//形状描述
ctx.draw()//绘制图像

路径的画法：

const ctx = wx.createCanvasContext('myCanvas')//创建Canvas
ctx.moveTo(10, 10)//初始点选择
ctx.lineTo(100, 10)//画线
ctx.lineTo(100, 100)
ctx.fill()//填充形状
ctx.draw()

文字的画法：

const ctx = wx.createCanvasContext('myCanvas')
 
ctx.setFontSize(20) //文字大小
ctx.fillText('Hello', 20, 20) //文字后跟的参数为文字启示坐标
ctx.fillText('MINA', 100, 100)
 
ctx.draw()

圆角矩形的画法

const bot = wx.createCanvasContext('bottcan')

bot.moveTo(0, 0)
bot.lineTo(wid / 2 - 15, 0)
bot.lineTo(wid / 2 + 15, 35)
bot.lineTo(10, 35)
bot.arc(0 + 10, 35 - 10, 10, Math.PI * 0.5, Math.PI)//勾画圆角矩形的线段
bot.setFillStyle('#FF9955')
bot.fill()
bot.setFillStyle('#414141')
bot.setFontSize(20)
bot.fillText('重填问卷', 50, 25)

按照手机比例画图方法

​ 在生成Canvas的时候，需要固定宽度和高度，其中高度比较好固定，但是宽度的固定就比较困难，因为不同手机型号宽度不同，因此需要得知本机可使用宽度为多少。

<canvas canvas-id="myCanvas" class="myCanvas"  style = "{{windowWidth}}px;height:35px" ></canvas>

var that = this;
    wx.getSystemInfo({
      success: function (res) {
        console.log(res.windowWidth) //获取用户手机宽度
        that.setData
          ({
            windowWidth: res.windowWidth * 0.94
          })

      }
    })

    var wid = this.data.windowWidth;

微信小程序层级问题

​ 在微信小程序中，Canvas这种默认组件的层级为最高，因此在弹出确认与否的提示时，Canva会影响使用，用户无法点击确认或取消，只能点击Canvas按钮，因此需解决该问题。

解决方案

​ 在点击出现选择框时，将Canvas隐藏，并且生成一张与原始画布相同的图片放在该位置，从而达到降低Canvas层级的效果。

js代码：

//radaarImg为导出的图片
var that = this
wx.canvasToTempFilePath({
     that.data.windowWidth,
    height: 35,
    canvasId: 'myCanvas',
    success: function (res) {
        that.setData({ radarImg: res.tempFilePath });
    }
});

wxml代码：

<view wx:if = "{{!can1}}">
     <canvas canvas-id="myCanvas" class="myCanvas"  style = "{{windowWidth}}px;height:35px" ></canvas>
    </view>
    <image wx:else src="{{radarImg}}" style=" {{windowWidth}}px; height:35px;" />

效果展示：