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

简介: 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进行绘图操作

示例

  <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>

image.png

画一朵小花

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();

image.png

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、开发者技术支持

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

image.png

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

相关文章
|
10天前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源,帮助他们快速构建高质量的小程序界面。在选择框架时,需要综合考虑各种因素,以找到最适合项目的解决方案。随着技术的不断进步,UI 框架也将不断发展和创新,为小程序开发带来更多的便利和可能性。
18 2
|
2月前
|
小程序 JavaScript 前端开发
小程序常见的UI框架
小程序常见的UI框架
280 60
|
16天前
|
小程序 开发者 UED
支付宝小程序UI/UX设计原则与最佳实践
支付宝小程序UI/UX设计原则与最佳实践
37 6
|
18天前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
80 0
|
3月前
|
开发者 图形学 前端开发
绝招放送:彻底解锁Unity UI系统奥秘,五大步骤教你如何缔造令人惊叹的沉浸式游戏体验,从Canvas到动画,一步一个脚印走向大师级UI设计
【8月更文挑战第31天】随着游戏开发技术的进步,UI成为提升游戏体验的关键。本文探讨如何利用Unity的UI系统创建美观且功能丰富的界面,包括Canvas、UI元素及Event System的使用,并通过具体示例代码展示按钮点击事件及淡入淡出动画的实现过程,助力开发者打造沉浸式的游戏体验。
83 0
|
4月前
|
小程序
通用的职位招聘小程序ui模板
通用的职位招聘小程序ui模板
39 5
通用的职位招聘小程序ui模板
|
3月前
|
小程序 UED 开发者
揭秘支付宝小程序成功之道:UI/UX设计原则与用户体验优化秘籍大公开!
【8月更文挑战第27天】支付宝小程序在移动互联网中扮演着重要角色,优秀的UI/UX设计能显著提升用户满意度。本文首先强调了设计的一致性、简洁性、易用性和响应性原则,确保用户获得顺畅体验。接着,介绍了最佳实践,包括利用支付宝设计组件库保持界面统一、优化加载速度、适应多设备显示、设置清晰导航以及重视用户反馈。最后,提供了一个简单示例展示如何应用支付宝设计组件。遵循这些指导原则,开发者能够构建既美观又实用的小程序。
73 0
|
4月前
|
编解码 前端开发 图形学
【技术深度解析】多平台适配下的UI适配难题:U3D游戏UI错乱的终极解决方案
【7月更文第12天】随着移动设备市场的多元化,Unity游戏开发者面临的一大挑战是如何在不同分辨率和屏幕尺寸的设备上保持UI的一致性和美观性。游戏在高分辨率平板与低分辨率手机上呈现出的UI布局混乱、按钮错位等问题,严重影响玩家体验。本文旨在探讨Unity UI(UGUI)在多平台适配中的最佳实践,通过优化Canvas Scaler设置、灵活运用RectTransform和Anchor Points,以及高效利用设计工具,确保UI的完美适配。
543 1
|
4月前
|
小程序 前端开发
微信综合购物商城小程序ui模板源码
微信电商小程序前端页面,综合购物商城ui界面模板。主要功能包含:电商主页、商品分类、购物车、购物车结算、我的个人中心管理、礼券、签到、新人专享、专栏、商品详情页、我的订单、我的余额、我的积分、我的收藏、我的地址、我的礼券等。这是一款非常齐全的电商小程序前端模板。
95 4
|
4月前
|
小程序 PHP
全新UI自助图文打印系统小程序源码 PHP后端 附教程
全新UI自助图文打印系统小程序源码 PHP后端 附教程
270 2