uniapp 画布

1.前言

uniapp中的canvas与HTML中的canvas用法并不同，他的使用文档请参考微信小程序画布

2.基本使用

• 1.准备canvas容器，并为其设置canvas-id和宽高（为了兼容H5，最好把id也一并设置）

<canvas id="canvas" canvas-id="canvas" style="width: 384px; height: 150px;"></canvas>

• 2.获取绘图工具（传入canvas-id）

var ctx = uni.createCanvasContext('canvas')

• 3.设置样式并进行绘制

ctx.setFontSize(20)
ctx.fillText('你好，世界', 50, 50)
ctx.draw(true) //不传true的话会清空之前的绘制操作

3.绘制文字

• 文字绘制分2种：填充文字和描边文字
• 另外绘制前还需要设置文字的样式

旧API:在设置样式时，旧API通过调用方法传参来实现

var ctx = uni.createCanvasContext('canvas')
				
ctx.setFillStyle('red') //设置填充色
ctx.setStrokeStyle('blue')  //设置描边颜色（边框）
ctx.setFontSize(20) //设置字体大小 字体的字号
ctx.setTextAlign('left') //设置文字对其方式 left/center/right
				
ctx.fillText('填充文字', 50, 50) //绘制填充文字
ctx.strokeText('描边文字', 50, 100) //绘制描边文字
ctx.draw() //绘制到画布中

新API:在设置样式时，旧API通过给属性赋值来实现,语法与HTML中的canvas一致

var ctx = uni.createCanvasContext('canvas')

ctx.fillStyle = 'red' //设置填充色
ctx.strokStyle = 'blue' //设置描边颜色（边框）
ctx.font = '20px' //设置字体大小 默认值为 10px sans-serif
				
ctx.setTextAlign('left') //设置文字对其方式 left/center/right
				
ctx.fillText('填充文字', 50, 50) //绘制填充文字
ctx.strokeText('描边文字', 50, 100) //绘制描边文字
ctx.draw() //绘制到画布中

4.渲染图片

支持base64位的图片格式

ctx.drawImage(base64_img,x0,y0)
ctx.draw(true)

5.渲染直线

• 设置直线宽度和颜色
• 设置起点和终点
• 开启绘制

ctx.setStrokeStyle('green')
ctx.setLineWidth(data[i].lineWidth) //设置直线宽度
ctx.moveTo(0, 50)
ctx.lineTo(200, 50)
ctx.stroke()
ctx.draw(true)