使用SVG绘制圆形、扇形、文字实现转盘抽奖效果

效果图如下：

思路：

1.先引入SVG

<!--html-->
<!--因为转盘中的文字及奖品个数都是动态的，所以在js中生成svg字符串，利用vue的v-html渲染到页面-->
<svg width="100%" height="100%" version="1.1"  xmlns="http://www.w3.org/2000/svg" v-html="svgStr">

2.画出最外层的圆

//js
//因为圆心在（150，150），且半径为150，所以整个画布为300*300
this.svgStr=“<circle cx="150" cy="150" r="150" stroke-width="2" fill="#C13820"/>”

3.画出扇形及文字 

let color = index % 2 == 0 ? 'white' : '#FEF6E1';//扇形的颜色，白黄