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)