Skip to content

Latest commit

 

History

History
256 lines (163 loc) · 5.99 KB

20210922-Canvas画图基本使用.md

File metadata and controls

256 lines (163 loc) · 5.99 KB

Canvas画图的基本使用

​ 在html5中，一个canvas标签就对应一个Canvas对象，我们在JavaScript可以使用document.getElementById()等常规函数来获取该对象。值得注意的是，在JavaScript中，我们并不是直接操作Canvas对象，而是通过Canvas对象来获取对应的图形绘制上下文对象CanvasRenderingContext2D，然后我们再利用CanvasRenderingContext2D对象自带的许多绘制图形的函数来绘图。

​ 这就好像是每一张画布都对应一支画笔，要想在画布上绘画，我们就先要拿到对应的画笔，然后使用这支画笔在画布上绘图。CanvasRenderingContext2D对象就相当于这支画笔。

小程序Canvas 2d使用步骤

const canvas = await getCanvasNode('#poster') //通过selector获取canvas实例
const ctx = canvas.getContext('2d')//获取canvas的画笔
canvas.width = 699 //设置画布大小
canvas.height = 890

this.render(canvas, ctx)//开始绘图...
export const getCanvasNode = async (id) => {
  if(!id) throw new Error('getCanvasNode没有传入id')
  const selector = wx.createSelectorQuery()
  const canvasRef = await new Promise(resolve => selector.select(id).node(resolve).exec())
  const canvas = canvasRef.node //canvas节点实例
  return canvas
}

ctx.beginPath()

开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边

  • 在最开始的时候相当于调用了一次 beginPath。
  • 同一个路径内的多次 setFillStyle、setStrokeStyle、setLineWidth等设置，以最后一次设置为准。

ctx.moveTo(x,y)

把路径移动到画布中的指定点，不创建线条。用 stroke 方法来画线条

const ctx = canvas.getContext('2d')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)

ctx.moveTo(10, 50)
ctx.lineTo(100, 50)
ctx.stroke()

image-20210922150935886

ctx.lineTo(x,y)

参数

number x

目标位置的 x 坐标

number y

目标位置的 y 坐标

增加一个新点，然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条。

const ctx = canvas.getContext('2d')
ctx.moveTo(10, 10)
ctx.rect(10, 10, 100, 50)
ctx.lineTo(110, 60)
ctx.stroke()

填充

ctx.fill()

对当前路径中的内容进行填充。默认的填充色为黑色

ctx.fillStyle = 'red'

设置填充颜色，需要在填充前设置

ctx.fillRect(x,y,w,h)

const ctx = canvas.getContext('2d')
ctx.fillStyle = 'red'
ctx.fillRect(10, 10, 150, 75)

描边

ctx.stroke

画出当前路径的边框。默认颜色色为黑色。

ctx.strokeRect(x,y,w,h)

画一个矩形(非填充)。 用 strokeStyle 设置矩形线条的颜色，如果没设置默认是黑色。

const ctx = canvas.getContext('2d')
ctx.strokeStyle = ‘red'
ctx.strokeRect(10, 10, 150, 75)

image-20210922152523198

ctx.strokeStyle = 'red'

描边的颜色，默认颜色为 black

const ctx = canvas.getContext('2d')
ctx.strokeStyle ='red'
ctx.strokeRect(10, 10, 150, 75)

image-20210922152331403

填充文字

fillText(string text, number x, number y, number maxWidth)

在画布上绘制被填充的文本

参数

string text

在画布上输出的文本

number x

绘制文本的左上角 x 坐标位置

number y

绘制文本的左上角 y 坐标位置

number maxWidth

需要绘制的最大宽度，可选

示例代码

export const fillText = (ctx,context, fontStyle, color, x, y) => {
  if(!ctx) throw new Error('fillText没有传入ctx')
  return new Promise((resolve, reject) => {
    // 填充文字
    ctx.fillStyle = color || '#000' //可以设置文字颜色
    ctx.font = fontStyle || '26px sans-serif'
    ctx.fillText(context,x,y)
    resolve()
  })
}

fillText(ctx,'一键加油小程序','26px sans-serif','#000',95,780)

image-20210922153102118

保存与恢复

ctx.save()

保存绘图上下文。

ctx.restore()

恢复之前保存的绘图上下文。

绘图

ctx.drawImage

绘制图像到画布

参数

string imageResource

所要绘制的图片资源（网络图片要通过 getImageInfo / downloadFile 先下载）

number sx

需要绘制到画布中的，imageResource的矩形（裁剪）选择框的左上角 x 坐标

number sy

需要绘制到画布中的，imageResource的矩形（裁剪）选择框的左上角 y 坐标

number sWidth

需要绘制到画布中的，imageResource的矩形（裁剪）选择框的宽度

number sHeight

需要绘制到画布中的，imageResource的矩形（裁剪）选择框的高度

number dx

imageResource的左上角在目标 canvas 上 x 轴的位置

number dy

imageResource的左上角在目标 canvas 上 y 轴的位置

number dWidth

在目标画布上绘制imageResource的宽度，允许对绘制的imageResource进行缩放

number dHeight

在目标画布上绘制imageResource的高度，允许对绘制的imageResource进行缩放

有三个版本的写法：

  • drawImage(imageResource, dx, dy)
  • drawImage(imageResource, dx, dy, dWidth, dHeight)
  • drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 从 1.9.0 起支持
const ctx = canvas.getContext('2d')

wx.chooseImage({
  success: function(res){
    ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
  }
})
const canvas = await getCanvasNode('#poster')
const ctx = canvas.getContext('2d')
canvas.width = 699 //画布设置宽度
canvas.height = 890
let canvasImg = canvas.createImage()//创建图片
await new Promise((resolve, reject) => { //等待图片加载完成
    canvasImg.onload = (e) => {
        resolve()
    }
    canvasImg.onerror = (e) => {
        reject()
    }
    let url = '/static/images/logo.png'
    canvasImg.src = url
})
ctx.drawImage(canvasImg, 0, 0, 699, 890) //绘图 在(x,y)处画699*890的图