js HTML5 Canvas绘制转盘抽奖

时间：2019-01-05分类：JavaScript作者：编程之家

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

1.实现的基本效果

2.主要的内容

•html5中canvas标签的使用 •jQueryRotate.js旋转插件

3.主要HTML代码

rush:xhtml;">

4.主要的css代码

<div class="jb51code">
<pre class="brush:css;">
.content{
display:block;
width:95%;
margin: 30px auto;
}

.content .wheel{
display:block;
width:100%;
position:relative;
background-image:url(../images/wheel-bg.png);
background-size:100% 100%;
}

.content .wheel canvas.item{
width:100%;
}

.content .wheel img.pointer{
position:absolute;
width:31.5%;
height:42.5%;
left:34.6%;
top:23%;
}

.tips{
text-align:center;
margin:20px 0;
font:normal 24px 'MicroSoft YaHei';
}

5.核心js代码

rush:js;"> /* * 渲染转盘 * */ function drawWheelCanvas(){

// 获取canvas画板，相当于layer？？
var canvas = document.getElementById("wheelCanvas");
// var canvas = ($("#wheelCanvas")).get()[0]; // 注意，jQuery获取的是包装过的对象，不是DOM对象,可以进行转换

// 计算每块占的角度，弧度制
var baseAngle = Math.PI * 2 / (turnWheel.rewardNames.length);
// 获取上下文
var ctx=canvas.getContext("2d");

var canvasW = canvas.width; // 画板的高度
var canvasH = canvas.height; // 画板的宽度
//在给定矩形内清空一个矩形
ctx.clearRect(0,canvasW,canvasH);

//strokeStyle 绘制颜色
ctx.strokeStyle = "#FFBE04"; // 红色
//font 画布上文本内容的当前字体属性
ctx.font = '16px Microsoft YaHei';

// 注意，开始画的位置是从0°角的位置开始画的。也就是水平向右的方向。
// 画具体内容
for(var index = 0 ; index < turnWheel.rewardNames.length ; index++)
{
// 当前的角度
var angle = turnWheel.startAngle + index * baseAngle;
// 填充颜色
ctx.fillStyle = turnWheel.colors[index];

// 开始画内容
// ---------基本的背景颜色----------
ctx.beginPath();
/*
 * 画圆弧，和IOS的Quartz2D类似
 * context.arc(x,y,r,sAngle,eAngle,counterclockwise);
 * x :圆的中心点x
 * y :圆的中心点x
 * sAngle,eAngle :起始角度、结束角度
 * counterclockwise : 绘制方向,可选，False = 顺时针，true = 逆时针
 * */
ctx.arc(canvasW * 0.5,canvasH * 0.5,turnWheel.outsideRadius,angle,angle + baseAngle,false);
ctx.arc(canvasW * 0.5,turnWheel.insideRadius,true);
ctx.stroke();
ctx.fill();
//保存画布的状态，和图形上下文栈类似，后面可以Restore还原状态（坐标还原为当前的0，0），
ctx.save();

/*----绘制奖品内容----重点----*/
// 红色字体
ctx.fillStyle = "#E5302F";
var rewardName = turnWheel.rewardNames[index];
var line_height = 17;
// translate方法重新映射画布上的 (0,0) 位置
// context.translate(x,y);
// 见PPT图片，
var translateX = canvasW * 0.5 + Math.cos(angle + baseAngle / 2) * turnWheel.textRadius;
var translateY = canvasH * 0.5 + Math.sin(angle + baseAngle / 2) * turnWheel.textRadius;
ctx.translate(translateX,translateY);

// rotate方法旋转当前的绘图，因为文字适合当前扇形中心线垂直的！
// angle，当前扇形自身旋转的角度 + baseAngle / 2 中心线多旋转的角度 + 垂直的角度90°
ctx.rotate(angle + baseAngle / 2 + Math.PI / 2);

/** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
// canvas 的 measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。
// fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色. fillStyle 属性以另一种颜色/渐变来渲染文本
/*
 * context.fillText(text,x,maxWidth);
 * 注意！！！y是文字的最底部的值，并不是top的值！！！
 * */
if(rewardName.indexOf("M")>0){//<a href="https://www.jb51.cc/tag/chaxun/" target="_blank" class="keywords">查询</a>是否包含字段 流量包
  var rewardNames = rewardName.split("M");
  for(var j = 0; j<rewardNames.length; j++){
    ctx.font = (j == 0)?'bold 20px Microsoft YaHei':'16px Microsoft YaHei';
    if(j == 0){
      ctx.fillText(rewardNames[j]+"M",-ctx.measureText(rewardNames[j]+"M").width / 2,j * line_height);
    }else{
      ctx.fillText(rewardNames[j],-ctx.measureText(rewardNames[j]).width / 2,j * line_height);
    }
  }
}else if(rewardName.indexOf("M") == -1 && rewardName.length>6){//奖品<a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a>长度超过一定范围
  rewardName = rewardName.substring(0,6)+"||"+rewardName.substring(6);
  var rewardNames = rewardName.split("||");
  for(var j = 0; j<rewardNames.length; j++){
    ctx.fillText(rewardNames[j],j * line_height);
  }
}else{
  //在画布上绘制填色的文本。文本的默认颜色是黑色
  ctx.fillText(rewardName,-ctx.measureText(rewardName).width / 2,0);
}

//添加对应图标
if(rewardName.indexOf("Q币")>0){
  // 注意，这里要等到img加载完成才能绘制
  imgQb.onload=function(){
    ctx.drawImage(imgQb,-15,10);
  };
  ctx.drawImage(imgQb,10);

}else if(rewardName.indexOf("谢谢参与")>=0){
  imgSorry.onload=function(){
    ctx.drawImage(imgSorry,10);
  };
  ctx.drawImage(imgSorry,10);
}
//还原画板的状态到上<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>save()状态之前
ctx.restore();

/*----绘制奖品结束----*/

}
}

最后这玩意和IOS里面的Quartz2D技术几乎一样.... 详细代码>>>>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

canvas js 抽奖抽奖