js HTML5画布绘制转盘抽奖

本文实例为大家分享了射流研究…转盘抽奖的具体代码，供大家参考，具体内容如下

1.实现的基本效果

2.主要的内容

html5中帆布标签的使用jQueryRotate.js旋转插件

3.主要超文本标记语言代码

body div class=' content ' div class=' wheel ' canvas class=' item ' id=' wheel canvas ' width=' 422 px ' height=' 422 px '/canvas img class=' pointer ' src=' http : images/wheel-pointer。png '/div/div class=' tips ' span id=' tips ' Jason/span/div/body/html 4 .主要的钢性铸铁代码。内容{显示：块宽度：95%;余量： 30px自动；}.内容。车轮{显示：块宽度：100%;位置：相对；背景-图像：url(./图像/车轮-BG。巴布亚新几内亚)；背景尺寸：100% 100%;}.内容车轮帆布。项目{宽度：100%；}.内容车轮img。指针{位置：绝对；宽度：31.5%;高：42.5%;左：34.6%;top:23}。tips { text-align : center余量：20 px 0；字体：普通24px ' MicroSoft YaHei}5.核心射流研究…代码

/* *渲染转盘* */函数draw wheel canvas(){//获取canvas画板，相当于图层？var canvas=document . getelementbyid(' wheel canvas ')；//var canvas=($('#wheelCanvas '))。get()[0]；//注意jQuery获取的是打包对象，不是DOM对象，可以转换//计算每个块占用的角度。弧系为varbase angle=math . pi * 2/(turn wheel . reward names . length)；//获取上下文var CTX=canvas . getcontext(' 2d ')；var canvasW=canvas.width//画板高度var canvasH=canvas.height//画板宽度//清空矩形CTX。给定矩形内的clearrect (0，0，canvasw，canvash );//strokeStyle绘图颜色ctx.strokeStyle=' # FFBE04//红色//字体画布上文本内容的当前字体属性ctx.font='16px微软雅黑'；//注意，起始位置是从0的角度画出的。也就是水平向右。//绘制具体内容为(var索引=0；index turn wheel . RewardNames . length；索引){//当前角度var angle=转轮。起始角度指数*基础角度；//填充颜色CTX . fill style=turn wheel . colors[index]；//开始绘制内容//-基本背景色-CTX。begin path()；/* *画一条弧线，类似IOS * Context的Quartz2D。弧(x，y，r，桑乐，角度，计数器时钟方向)；* x :圆心点x * y :圆心点x *桑乐，eAngle :起始角和终止角*逆时针：绘制方向，可选，False=顺时针，true=逆时针* */ctx.arc(canvasW * 0.5，canvasH * 0.5，turnWheel.outsideRadius，Angle，angle baseAngle，False)；ctx.arc(canvasW * 0.5，canvasH * 0.5，turnWheel.insideRadius，angle baseAngle，angle，true)；CTX . stroke()；CTX . fill()；//保存画布的状态，类似于图形上下文堆栈。以后可以恢复状态(坐标恢复到当前的0，0)，CTX . save()；/*-绘制奖品内容-焦点-*///红色字体CTX . fill style=' # e 5302 f '；var Reward name=turn wheel . Reward names[index]；var line _ height=17//translate方法在画布上重新映射(0，0)位置//context.translate(x，y)；//见PPT图片，var translate x=canvasw * 0.5 math . cos(角度底角/2) * turn wheel.text半径；var translateY=canvasH * 0.5 math . sin(基于角度的角度/2)* turn wheel . text radius；ctx.translate(translateX，translateY)；//rotate方法旋转当前图形，因为文字适合当前扇形的垂直中心线！//angle，当前扇区自身旋转的角度，baseAngle/2，中心线旋转较多的角度，垂直角度为90 CTX . rotate(angle base angle/2 math . pi/2)；/* *以下代码根据奖品类型和奖品名称长度呈现不同的效果，如字体、颜色和图片效果。(根据实际情况变化)* *///canvas的measureText()方法返回一个包含以像素为单位的指定字体宽度的对象。//fillText()方法在画布上绘制填充文本。

文本的默认颜色是黑色fillStyle .属性以另一种颜色/渐变来渲染文本/* * context.fillText(text，x，y，MaxWidth)；* 注意！y是文字的最底部的值，并不是顶端的值！* */if(奖励名称。索引为(' M ')0){//查询是否包含字段流量包var奖励名称=奖励名称。拆分(' M ')；for(var j=0；jRewardNames . length j){ CTX . font=(j==0)？粗体20px微软雅黑：'16px微软雅黑；if(j==0){ CTX。(奖励名字[j]‘M’，-CTX。测量文本(奖励名称[j]' M ').宽度/2，j * line _ height)；} else { CTX。CTX。测量文本(重新命名[j]).宽度/2，j * line _ height)；} } } else if(奖励名称。的索引(' M ')==-1奖励名称。长度6){//奖品名称长度超过一定范围奖励名称=奖励名称。子字符串(0，6)' | | '奖励名称。子串(6)；var RewardNames=RewardName。拆分(' | | ')；for(var j=0；ctx。测量文本(重新命名[j]).宽度/2，j * line _ height)；} }else{ //在画布上绘制填色的文本。文本的默认颜色是黑色ctx.fillText(rewardName)，-ctx.measureText(rewardName).宽度/2,0);} //添加对应图标if(rewardName.indexOf('Q币')0){ //注意，这里要等到img加载完成才能绘制imgQb。onload=function(){ CTX。绘制图像(imgQb，-15，10)；};ctx.drawImage(imgQb，-15，10)；}else if(rewardName.indexOf('谢谢参与)=0){ img抱歉。onload=function(){ CTX。绘制图像(img对不起，-15，10)；};ctx.drawImage(imgSorry，-15，10)；} //还原画板的状态到上一个保存()状态之前CTX。restore()；/* - 绘制奖品结束- */}}最后这玩意和IOS里面的Quartz2D技术几乎一样.详细代码点击下载

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。