uni-app以其“一次开发，多端覆盖”的理念深得大家青睐，并且生态环境丰富，本文以一个幸运轮盘小例子，简述canvas的相关操作，仅供学习分享使用，如有不足之处，还请指正。
什么是canvas?
canvas又称画布，为uni-app提供自定义绘制的区域，通常用于图表或者图片的处理。在uni-app开发中，如果要在canvas中进行绘制，需要通过CanvasContext完成。
canvas相关知识点
canvas属性说明【canvas-id 在同一页面中不可重复】
CanvasContext的定义通过uni-app提供的API【uni.createCanvasContext(canvasId, this)】完成，如下所示：
在canvas上进行绘制，主要通过CanvasContex对象进行。关于CanvasContext的使用方法，可参考官方文档。
示例效果图
在Chrome浏览器上，如下所示：
在Android手机上，如下图所示：
核心源代码
在uni-app开发中，一个功能可以封装成一个控件，便于维护和调用。
本例Lottery控件的template源码如下：
1 <template> 2 <view class="content1"> 3 <canvas type="2D" canvas-id="canvas" id="canvas" :style="canvasStyle"> 4 5 </canvas> 6 <image :src="inLottery?'../../static/img/start_disabled.png':'../../static/img/start.png'" id="start" @tap="playReward"></image> 7 <view class="bottom1"> 8 <image src="../../static/img/xiaolian.png" class="smile"></image> 9 <view class="winner">{{winner}}</view> 10 </view> 11 12 </view> 13 </template>