canvas 实现圆角矩形与文字

 

 

 1.data数据

data () {
  return {
　　startX: 74,
　　startY: 900
　} 
}

　　

2.methods

methods{
　　drawArcTo (ctx, w, r) {
  　　let x = parseFloat(this.startX + '')
  　　let y = parseFloat(this.startY + '')
  　　let endX = x + w + 2 * r + 15
  　　if (endX > 700) {
    　　y += 2 * r + 16
    　　x = 74
    　　endX = x + w + 2 * r + 15
  　　}
  　　this.startX = endX
  　　this.startY = y
  　　this.list.push(w)
  　　ctx.beginPath()
  　　ctx.moveTo(x + r, y) // 创建开始点
  　　ctx.lineTo(x + w + r, y) // 创建水平线
  　　ctx.strokeStyle = '#2486FF'
  　　ctx.arcTo(x + w + 2 * r, y, x + w + 2 * r, y + r, r) // 创建弧
  　　ctx.arcTo(x + w + 2 * r, y + (2 * r), x + w, y + (2 * r), r)
  　　ctx.lineTo(x + r, y + (2 * r))
  　　ctx.arcTo(x, y + (2 * r), x, y + r, r)
  　　ctx.arcTo(x, y, x + r, y, r)
  
  　　ctx.setFillStyle('#2486FF')
  　　ctx.fill()
  　　ctx.stroke();
  
  　　return [x + r, y + r]
　　},

　　markPoster () {
　　　　let ctx = wx.createCanvasContext('poster')
　　　　let txtArr = ['11万公里','2018年','排量1.6L','挂牌价11万元']
　　　　for (let i = 0; i < txtArr.length; i++) {
  　　　　((i) => {
    　　　　ctx.font = '24px Microsoft YaHei'
    　　　　let item = txtArr[i]
    　　　　let width = ctx.measureText(item).width
    　　　　let coordinates = this.drawArcTo(ctx, width, 28)
    　　　　ctx.setFillStyle('#ffffff')
    　　　　ctx.fillText(item, coordinates[0], coordinates[1])
  　　　　})(i)
　　　　}
　　　　
　　　　ctx.draw(true, () => {
  　　　　setTimeout(() => {
    　　　　wx.canvasToTempFilePath({
     　　　　 x: 0,
      　　　　y: 0,
      　　　　width: 750,
      　　　　height: 1334,
      　　　　canvasId: 'poster',
      　　　　success: (file) => {
        　　　　this.posterImg = file.tempFilePath
      　　　　}
    　　　　})
  　　　　}, 1000)
　　　　})
　　} 　
}