miniprogram-demo/packageAPI/pages/canvas/example.js

const example = {}

example.measureText = function (context) {
  const data = context.measureText('123')
  console.log(`width: ${data.width}`)
}

example.rotate = function (context) {
  context.beginPath()
  context.rotate(10 * Math.PI / 180)
  context.rect(225, 75, 20, 10)
  context.fill()
}

example.scale = function (context) {
  context.beginPath()
  context.rect(25, 25, 50, 50)
  context.stroke()

  context.scale(2, 2)

  context.beginPath()
  context.rect(25, 25, 50, 50)
  context.stroke()
}

example.reset = function (context) {
  context.beginPath()

  context.setFillStyle('#000000')
  context.setStrokeStyle('#000000')
  context.setFontSize(10)

  context.setShadow(0, 0, 0, 'rgba(0, 0, 0, 0)')

  context.setLineCap('butt')
  context.setLineJoin('miter')
  context.setLineWidth(1)
  context.setMiterLimit(10)
}

example.translate = function (context) {
  context.beginPath()
  context.rect(10, 10, 100, 50)
  context.fill()

  context.translate(70, 70)

  context.beginPath()
  context.fill()
}

example.save = function (context) {
  context.beginPath()
  context.setStrokeStyle('#00ff00')
  context.save()

  context.scale(2, 2)
  context.setStrokeStyle('#ff0000')
  context.rect(0, 0, 100, 100)
  context.stroke()
  context.restore()

  context.rect(0, 0, 50, 50)
  context.stroke()
}

example.restore = function (context) {
  [3, 2, 1].forEach(function (item) {
    context.beginPath()
    context.save()
    context.scale(item, item)
    context.rect(10, 10, 100, 100)
    context.stroke()
    context.restore()
  })
}

example.drawImage = function (context) {
  context.drawImage('/image/wechat.png', 0, 0)
}

example.fillText = function (context) {
  context.setStrokeStyle('#ff0000')

  context.beginPath()
  context.moveTo(0, 10)
  context.lineTo(300, 10)
  context.stroke()

  // context.save()
  // context.scale(1.5, 1.5)
  // context.translate(20, 20)
  context.setFontSize(10)
  context.fillText('Hello World', 0, 30)
  context.setFontSize(20)
  context.fillText('Hello World', 100, 30)

  // context.restore()

  context.beginPath()
  context.moveTo(0, 30)
  context.lineTo(300, 30)
  context.stroke()
}

example.fill = function (context) {
  context.beginPath()
  context.rect(20, 20, 150, 100)
  context.setStrokeStyle('#00ff00')
  context.fill()
}

example.stroke = function (context) {
  context.beginPath()
  context.moveTo(20, 20)
  context.lineTo(20, 100)
  context.lineTo(70, 100)
  context.setStrokeStyle('#00ff00')
  context.stroke()
}

example.clearRect = function (context) {
  context.setFillStyle('#ff0000')
  context.beginPath()
  context.rect(0, 0, 300, 150)
  context.fill()
  context.clearRect(20, 20, 100, 50)
}

example.beginPath = function (context) {
  context.beginPath()
  context.setLineWidth(5)
  context.setStrokeStyle('#ff0000')
  context.moveTo(0, 75)
  context.lineTo(250, 75)
  context.stroke()

  context.beginPath()
  context.setStrokeStyle('#0000ff')
  context.moveTo(50, 0)
  context.lineTo(150, 130)
  context.stroke()
}

example.closePath = function (context) {
  context.beginPath()
  context.moveTo(20, 20)
  context.lineTo(20, 100)
  context.lineTo(70, 100)
  context.closePath()
  context.stroke()
}

example.moveTo = function (context) {
  context.beginPath()
  context.moveTo(0, 0)
  context.lineTo(300, 150)
  context.stroke()
}

example.lineTo = function (context) {
  context.beginPath()
  context.moveTo(20, 20)
  context.lineTo(20, 100)
  context.lineTo(70, 100)
  context.stroke()
}

example.rect = function (context) {
  context.beginPath()
  context.rect(20, 20, 150, 100)
  context.stroke()
}

example.arc = function (context) {
  context.beginPath()
  context.arc(75, 75, 50, 0, Math.PI * 2, true)
  context.moveTo(110, 75)
  context.arc(75, 75, 35, 0, Math.PI, false)
  context.moveTo(65, 65)
  context.arc(60, 65, 5, 0, Math.PI * 2, true)
  context.moveTo(95, 65)
  context.arc(90, 65, 5, 0, Math.PI * 2, true)
  context.stroke()
}

example.quadraticCurveTo = function (context) {
  context.beginPath()
  context.moveTo(20, 20)
  context.quadraticCurveTo(20, 100, 200, 20)
  context.stroke()
}

example.bezierCurveTo = function (context) {
  context.beginPath()
  context.moveTo(20, 20)
  context.bezierCurveTo(20, 100, 200, 100, 200, 20)
  context.stroke()
}

example.setFillStyle = function (context) {
  ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
    context.setFillStyle(item)
    context.beginPath()
    context.rect(0 + 75 * index, 0, 50, 50)
    context.fill()
  })
}

example.setStrokeStyle = function (context) {
  ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
    context.setStrokeStyle(item)
    context.beginPath()
    context.rect(0 + 75 * index, 0, 50, 50)
    context.stroke()
  })
}

example.setGlobalAlpha = function (context) {
  context.setFillStyle('#000000');
  [1, 0.5, 0.1].forEach(function (item, index) {
    context.setGlobalAlpha(item)
    context.beginPath()
    context.rect(0 + 75 * index, 0, 50, 50)
    context.fill()
  })
}

example.setShadow = function (context) {
  context.beginPath()
  context.setShadow(10, 10, 10, 'rgba(0, 0, 0, 199)')
  context.rect(10, 10, 100, 100)
  context.fill()
}

example.setFontSize = function (context) {
  [10, 20, 30, 40].forEach(function (item, index) {
    context.setFontSize(item)
    context.fillText('Hello, world', 20, 20 + 40 * index)
  })
}

example.setLineCap = function (context) {
  context.setLineWidth(10);
  ['butt', 'round', 'square'].forEach(function (item, index) {
    context.beginPath()
    context.setLineCap(item)
    context.moveTo(20, 20 + 20 * index)
    context.lineTo(100, 20 + 20 * index)
    context.stroke()
  })
}

example.setLineJoin = function (context) {
  context.setLineWidth(10);
  ['bevel', 'round', 'miter'].forEach(function (item, index) {
    context.beginPath()

    context.setLineJoin(item)
    context.moveTo(20 + 80 * index, 20)
    context.lineTo(100 + 80 * index, 50)
    context.lineTo(20 + 80 * index, 100)
    context.stroke()
  })
}

example.setLineWidth = function (context) {
  [2, 4, 6, 8, 10].forEach(function (item, index) {
    context.beginPath()
    context.setLineWidth(item)
    context.moveTo(20, 20 + 20 * index)
    context.lineTo(100, 20 + 20 * index)
    context.stroke()
  })
}

example.setMiterLimit = function (context) {
  context.setLineWidth(4);

  [2, 4, 6, 8, 10].forEach(function (item, index) {
    context.beginPath()
    context.setMiterLimit(item)
    context.moveTo(20 + 80 * index, 20)
    context.lineTo(100 + 80 * index, 50)
    context.lineTo(20 + 80 * index, 100)
    context.stroke()
  })
}

module.exports = example