HaaS UI小程序解决方案进阶教学之一：Canvas画图入门

名词解释

AliOS Things： 阿里云智能IoT团队自研的物联网操作系统

HaaS：全称是Hardware as a Service，阿里云智能IoT团队基于AliOS Things系统推出的硬件即服务

HaaS UI：全称是Hardware as a Service User Interface，是源自AliOS Things操作系统上的一套应用&图形解决方案，支持C/C++和 JS两种开发语言

 

Canvas组件

在H5里面，canvas就是一个标签，是一个有特殊功能的标签，实际上它是一个画布，我们可以在这个画布上填各种图形元素，甚至可以操作画布上的每一个像素点。在HaaS UI中，也根据H5中canvas相关的api，内置了一个高性能的canvas组件。关于canvas的api，可参阅：w3c规范，HaaS UI支持了该规范下的大部分api。

 

1、用途

canvas的应用场景非常多，主要运用在一些需要操作图形的场景，如绘制曲线、特效、粒子特效、图表、游戏、二维码、条形码等等场景。

2、开始

在HaaS UI中使用canvas，只需要以下3个步骤即可：

1. 在template中添加canvas标签
2. 在组件挂载之后，比方mounted生命周期函数中，获取canvas的上下文环境
3. 调用context的api进行绘图操作

示例

画一朵小花

// 获取canvas context
let ctx = createCanvasContext(this.$refs.canvas);
// 花瓣1
ctx.beginPath();
ctx.arc(100,20,20,0,2*Math.PI);
ctx.fillStyle = 'red';//填充样式
ctx.fill();
// 花瓣2
ctx.beginPath();
ctx.arc(140,20,20,0,2*Math.PI);
ctx.fillStyle = 'red';
ctx.fill();
// 花瓣3
ctx.beginPath();
ctx.arc(100,60,20,0,2*Math.PI);
ctx.fillStyle = 'red';
ctx.fill();
// 花瓣4
ctx.beginPath();
ctx.arc(140,60,20,0,2*Math.PI);
ctx.fillStyle = 'red';
ctx.fill();
//绘制花蕊圆心（120,40）
ctx.beginPath();
ctx.arc(120,40,20,0,2*Math.PI);
ctx.fillStyle = 'yellow';
ctx.fill();
//花径
ctx.beginPath();
ctx.moveTo(120,60);
ctx.quadraticCurveTo(125,130,100,150);//贝塞尔曲线
ctx.stroke();

3、canvas api

颜色、样式

接口	类型	描述	备注
fillStyle	Color/Gradient	设置填充绘画的样式	ctx.fillStyle="white"|grad
strokeStyle	Color/Gradient	设置线条绘画的样式	ctx.strokeStyle="white"|grad
createLinearGradient()	function	创建线性渐变（用在画布内容上）	ctx.createLinearGradient(x0,y0,x1,y1) x0: 渐变开始点的 x 坐标 y0: 渐变开始点的 y 坐标 x1: 渐变结束点的 x 坐标 y1: 渐变结束点的 y 坐标
createRadialGradient()	function	创建放射状/环形的渐变（用在画布内容上）	ctx.createRadialGradient(x0,y0,r0,x1,y1,r1) x0: 渐变开始圆的 x 坐标 y0: 渐变开始圆的 y 坐标 r0: 开始圆的半径 x1: 渐变结束圆的 x 坐标 y1: 渐变结束圆的 y 坐标 r1: 结束圆的半径
addColorStop()	function	规定渐变对象中的颜色和停止位置	grad.addColorStop(stop,color) stop: 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。 color: 在结束位置显示的 CSS 颜色值

线条样式

接口	类型	描述	备注
lineWidth	number	设置线条宽度，单位px	ctx.lineWidth=5
lineCap	Enum	设置线条的结束线帽样式	ctx.lineCap='butt|round|square'
lineJoin	Enum	设置线条交叉的拐角样式	ctx.lineJoin='bevel|round|miter'
miterLimit	number	设置最大斜接长度，lineJoin=miter时生效	ctx.miterLimit=10

矩形

接口	类型	描述	备注
rect()	function	创建矩形	ctx.rect(0,0,100,100)
fillRect()	function	填充矩形	ctx.fillRect(0,0,100,100)
strokeRect()	function	绘制矩形(无填充)	ctx.strokeRect(0,0,100,100)
clearRect()	function	清除矩形像素	ctx.clearRect(0,0,100,100)

路径

接口	类型	描述	备注
fill()	function	填充当前路径	ctx.fill()
stroke()	function	绘制当前路径(无填充)	ctx.stroke()
beginPath()	function	开始或重置一条路径	ctx.beginPath()
closePath()	function	关闭路径(从当前点到起始点)	ctx.closePath()
moveTo()	function	把路径移动到画布中的指定点，不创建线条	ctx.moveTo(100,100)
lineTo()	function	添加一个新点，然后在画布中创建从该点到最后指定点的线条	ctx.lineTo(100,200)
clip()	function	从原始画布剪切当前路径尺寸的区域	ctx.clip()
quadraticCurveTo()	function	创建二次贝塞尔曲线	ctx.quadraticCurveTo(cpx,cpy,x,y) cpx: 控制点的 x 坐标 cpy: 控制点的 y 坐标 x: 结束点的 x 坐标 y: 结束点的 y 坐标
bezierCurveTo()	function	创建三次贝塞尔曲线	ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) cp1x: 第一个控制点的 x 坐标 cp1y: 第一个控制点的 y 坐标 cp2x: 第二个控制点的 x 坐标 cp2y: 第二个控制点的 y 坐标 x: 结束点的 x 坐标 y: 结束点的 y 坐标
arc()	function	创建弧/曲线（用于创建圆形或部分圆）	ctx.arc(x,y,r,sAngle,eAngle) x: 圆的中心的 x 坐标。 y: 圆的中心的 y 坐标。 r: 圆的半径。 sAngle: 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。 eAngle: 结束角，以弧度计。
arcTo()	function	创建两切线之间的弧/曲线	ctx.arcTo(x1,y1,x2,y2,r) x1: 弧的起点的 x 坐标。 y1: 弧的起点的 y 坐标。 x2: 弧的终点的 x 坐标。 y2: 弧的终点的 y 坐标。 r: 弧的半径。

转换

接口	类型	描述	备注
scale()	function	缩放当前绘图至更大或更小	ctx.scale(0.5,0.5)
rotate()	function	旋转当前绘图	ctx.rotate(angle) angle: 旋转弧度
translate()	function	平移当前绘图	ctx.translate(10,10)
transform()	function	替换绘图的当前转换矩阵	ctx.transform(a,b,c,d,e,f) a: 水平缩放绘图 b: 垂直倾斜绘图 c: 水平倾斜绘图 d: 垂直缩放绘图 e: 水平移动绘图 f: 垂直移动绘图
setTransform()	function	将当前转换重置为单位矩阵。然后运行transform()	ctx.setTransform(a,b,c,d,e,f)

文本

接口	类型	描述	备注
font	String	设置当前文字样式	ctx.font="font-style font-weight font-size" font-style: normal/italic(可选) font-weight: normal/bold(可选) font-size: 字号，像素单位
fillText()	function	在画布上绘制“被填充的”文本	ctx.fillText(text,x,y,maxWidth) text: 文本字符串 x: 开始绘制文本的 x 坐标位置 y: 开始绘制文本的 y 坐标位置 maxWidth: 可选。允许的最大文本宽度，以像素计。
strokeText()	function	在画布上绘制文本（无填充）	ctx.strokeText(text,x,y,maxWidth) 同fillText
measureText()	function	返回包含指定文本宽度的对象	ctx.measureText(text).width text: 要测量的文本字符串 result: width 测量的文本宽度

图像

接口	类型	描述	备注
drawImage	function	向画布上绘制图像	ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height) img: 要使用的图像(image标签) sx: 可选。开始剪切的 x 坐标位置。 sy: 可选。开始剪切的 y 坐标位置。 swidth: 可选。被剪切图像的宽度。 sheight: 可选。被剪切图像的高度。 x: 在画布上放置图像的 x 坐标位置。 y: 在画布上放置图像的 y 坐标位置。 width: 可选。要使用的图像的宽度。（伸展或缩小图像） height: 可选。要使用的图像的高度。（伸展或缩小图像）

像素操作

接口	类型	描述	备注
createImageData	function	创建新的、空白的 ImageData 对象	ctx.createImageData(width,height)
getImageData()	function	返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据	ctx.getImageData(x,y,width,height)
putImageData()	function	把图像数据（从指定的 ImageData 对象）放回画布上	ctx.putImageData(imgData,x,y) x: ImageData 对象左上角的 x 坐标，以像素计。 y: ImageData 对象左上角的 y 坐标，以像素计。

合成

接口	类型	描述	备注
globalAlpha	Number	设置当前透明值，全局生效	ctx.globalAlpha=0.5
globalCompositeOperation	Enum	设置混合模式，新图像如何绘制到已有的图像上	ctx.globalCompositeOperation="source-over|source-atop|source-in|source-out|destination-over|destination-atop|destination-in|destination-out|lighter|copy|xor" source-over: 默认值，在目标图像上显示源图像。

其他

接口	类型	描述	备注
save()	function	保存当前环境的状态	ctx.save()
restore()	function	返回之前保存过的路径状态和属性	ctx.restore()

4、开发者技术支持

如需更多技术支持，可加入钉钉开发者群，或者关注微信公众号

更多技术与解决方案介绍，请访问阿里云AIoT首页https://iot.aliyun.com/