uniapp中canvas的基础使用

canvas简介

canvas是uniapp中提供的一个组件,用于生成自定义的图形界面。通过canvas,我们可以通过JavaScript代码在页面上绘制各种图形和图像。

使用canvas

在页面中添加canvas

首先需要在页面的template中添加一个canvas组件:

<template>
  <view>
    <canvas canvas-id="myCanvas" id="myCanvas"></canvas>
  </view>  
</template>

• canvas-id是canvas的唯一标识
• id则是组件的id

获取canvas上下文

要在canvas上绘图,需要先获取canvas的上下文context,通过它才能对canvas进行操作:

const context = uni.createCanvasContext('myCanvas')

绘制基本形状

拿到context后,就可以通过它提供的API绘制各种形状了:

context.rect(x, y, width, height) // 绘制矩形
context.arc(x, y, r, sAngle, eAngle) // 绘制圆弧
context.lineTo(x, y) // 绘制直线

设置样式

canvas的绘图样式可以通过context的属性进行设置,例如:

context.setFillStyle('red') // 设置填充色
context.setLineWidth(2) // 设置线宽

绘制路径

可以通过以下方法绘制路径:

context.beginPath() // 开始路径
context.moveTo(x, y) 
context.lineTo(x, y)
context.closePath() // 闭合路径
context.stroke() // 描边路径
context.fill() // 填充路径

完成绘制

绘制完成后需要调用context.draw才会进行实际的绘制渲染:

context.draw()

以上就是uniapp中canvas的一些基础用法,通过它可以绘制出各种自定义的图形界面