移动组件到指定坐标_画布组件canvas

本文介绍了微信小程序中的画布组件canvas,通过canvas标签可以实现复杂动画。文章通过一个实例展示了如何利用canvas移动组件到指定坐标,帮助读者理解canvas在小程序中的应用。
摘要由CSDN通过智能技术生成

我们前面介绍的都是一些容器类或者元素内容类的组件,那么小程序可不可以去使用一些复杂的动画呢?小程序给我们提供了一个画布组件,通过这个画布组件我们可以完成一些复杂的动画。画布组件是通过canvas标签来实现的,现在让我们一起来看下canvas:

0b999fe3e20eebba67d6ea992ffca40a.png

type代表了canvas的类型,canvas-id表示了唯一标识符。现在让我们通过一个实例来看下吧:

8c0eb2a08071da1be26e17c7f7deaf87.png
<!-- canvas.wxml -->
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
<!-- 当使用绝对定位时,文档流后边的canvas的显示层级高于前边的canvas -->
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas"></canvas>
<!--
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值