小程序中的js - 纯基础知识---画※

小程序中的js - 纯基础知识---画※

# 基础知识 #

绘制圆形

// 画一个圆形
const ctx = wx.createCanvasContext('myCanvas')

ctx.beginPath()
ctx.arc(100, 100, 50, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()

ctx.draw()

绘制矩形

// 画一个矩形
const ctx = wx.createCanvasContext('myCanvas')

ctx.beginPath()
ctx.rect(100, 100, 100, 100)
ctx.setFillStyle('blue')
ctx.fill()

ctx.draw()

绘制线条

// 画一条线
const ctx = wx.createCanvasContext('myCanvas')

ctx.beginPath()
ctx.moveTo(100, 100)
ctx.lineTo(200, 200)
ctx.setStrokeStyle('green')
ctx.stroke()

ctx.draw()

绘制文本

// 画一段文本
const ctx = wx.createCanvasContext('myCanvas')

ctx.setFontSize(20)
ctx.setFillStyle('black')
ctx.fillText('Hello World!', 100, 100)

ctx.draw()

绘制图片

// 画一张图片
const ctx = wx.createCanvasContext('myCanvas')

ctx.drawImage('image.png', 100, 100, 100, 100)

ctx.draw()

监听触摸事件

// 监听触摸事件
const ctx = wx.createCanvasContext('myCanvas')

wx.onTouchStart((e) => {
  ctx.beginPath()
  ctx.moveTo(e.touches[0].x, e.touches[0].y)
})

wx.onTouchMove((e) => {
  ctx.lineTo(e.touches[0].x, e.touches[0].y)
  ctx.stroke()
})

wx.onTouchEnd((e) => {
  ctx.closePath()
})

保存画布

// 保存画布
const ctx = wx.createCanvasContext('myCanvas')

ctx.draw(true, () => {
  wx.canvasToTempFilePath({
    canvasId: 'myCanvas',
    success: (res) => {
      console.log(res.tempFilePath)
    }
  })
})