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个步骤即可：

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

示例

<template>
  <div class="page">
    <canvas ref="canvas" class="canvas" />
  </div>
</template>
<script>
export default {
  mounted() {
    // 获取canvas context
    let ctx = createCanvasContext(this.$refs.canvas);
    // 绘制红色矩形
    ctx.fillStyle = 'red';
    ctx.fillRect(10, 10, 50, 50);
  },
};
</script>
<style scoped>
.page {
  flex: 1;
  align-items: center;
}
.canvas {
  border-style: solid;
  border-color: #666;
  border-width: 1px;
  background-color: #ccc;
  margin-top: 10px;
}
</style>

画一朵小花

// 获取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();