原生js结合html5制作小飞龙的简易跳球,Canvas绘制
分类:关于美高梅

现在HTML5似乎慢慢流行起来了,有些前端高手为了兼容考虑,会在网页中添加对客户端浏览器判断的代码,知道用户浏览器是否支持HTML5,下面分享想我自己使用的2种方法

演示地址:

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

javascript HTML5 Canvas实现圆盘抽奖功能,html5canvas

我们经常参加各种电商优惠活动,比如购买达到一定数额进行抽奖活动,在比如微信抽奖,淘宝抽奖,迅雷赚钱宝圆盘抽奖活动等。这些抽奖活动部分就是由HTML5的Canvas来制作的,今天就为大家分享一下如何使用HTML5的Canvas来制作圆盘抽奖功能。老规矩,先看下效果图吧:

图片 1

再来看看Canvas的几个主要api:

 图片 2

全部源代码如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas圆盘抽奖应用DEMO演示</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
*{padding: 0px;margin: 0px;font-size: 16px;font-family: "Microsoft YaHei";}
.xttblog_box{width: 300px;height: 300px;margin: 100px auto;position: relative; }
.xttblog_box canvas{position: absolute;}
#xttblog{background-color: white;border-radius: 100%;}
#xttblog01,#xttblog03{left: 50px;top: 50px;z-index: 30;}
#xttblog02{left: 75px;top: 75px;z-index: 20;}
#xttblog{-o-transform: transform 6s;-ms-transform: transform 6s;-moz-transform: transform 6s;    
-webkit-transform: transform 6s;transition: transform 6s;-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;}
.taoge_btn{width: 60px;height: 60px;left: 120px;top: 120px;border-radius: 100%;
position: absolute;cursor: pointer;border: none;background: transparent;
outline: none;z-index: 40;}
</style>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
  //旋转角度
  var angles;
  //可抽奖次数
  var clickNum = 5;
  //旋转次数
  var rotNum = 0;
  //中奖公告
  var notice = null;
  //转盘初始化
  var color = ["#626262","#787878","rgba(0,0,0,0.5)","#DCC722","white","#FF4350"];
  var info = ["谢谢参与"," 1000","  10"," 500"," 100"," 4999","  1","  20"];
  var info1 = ['再接再厉','   元','   元',' 淘金币','   元',' 淘金币','   元',' 淘金币']
  canvasRun();
  $('#tupBtn').bind('click',function(){
    if (clickNum >= 1) {
      //可抽奖次数减一
      clickNum = clickNum-1;
      //转盘旋转
      runCup();
      //转盘旋转过程“开始抽奖”按钮无法点击
      $('#tupBtn').attr("disabled", true);
      //旋转次数加一
      rotNum = rotNum + 1;
      //“开始抽奖”按钮无法点击恢复点击
      setTimeout(function(){
        alert(notice);
        $('#tupBtn').removeAttr("disabled", true);
      },6000);
    }
    else{
      alert("亲,抽奖次数已用光!");
    }
  });

  //转盘旋转
  function runCup(){
    probability();
    var degValue = 'rotate('+angles+'deg'+')';
    $('#xttblog').css('-o-transform',degValue);      //Opera
    $('#xttblog').css('-ms-transform',degValue);     //IE浏览器
    $('#xttblog').css('-moz-transform',degValue);     //Firefox
    $('#xttblog').css('-webkit-transform',degValue);   //Chrome和Safari
    $('#xttblog').css('transform',degValue);
  }

  //各奖项对应的旋转角度及中奖公告内容
  function probability(){
    //获取随机数
    var num = parseInt(Math.random()*(7 - 0 + 0) + 0);
    //概率
    if ( num == 0 ) {
      angles = 2160 * rotNum + 1800;
      notice = info[0] + info1[0];
    }
    //概率
    else if ( num == 1 ) {
      angles = 2160 * rotNum + 1845;
      notice = info[7] + info1[7];
    }
    //概率
    else if ( num == 2 ) {
      angles = 2160 * rotNum + 1890;
      notice = info[6] + info1[6];
    }
    //概率
    else if ( num == 3 ) {
      angles = 2160 * rotNum + 1935;
      notice = info[5] + info1[5];
    }
    //概率
    else if ( num == 4 ) {
      angles = 2160 * rotNum + 1980;
      notice = info[4] + info1[4];
    }
    //概率
    else if ( num == 5 ) {
      angles = 2160 * rotNum + 2025;
      notice = info[3] + info1[3];
    }
    //概率
    else if ( num == 6 ) {
      angles = 2160 * rotNum + 2070;
      notice = info[2] + info1[2];
    }
    //概率
    else if ( num == 7 ) {
      angles = 2160 * rotNum + 2115;
      notice = info[1] + info1[1];
    }
  }

  //绘制转盘
  function canvasRun(){
    var canvas=document.getElementById('xttblog');
    var canvas01=document.getElementById('xttblog01');
    var canvas03=document.getElementById('xttblog03');
    var canvas02=document.getElementById('xttblog02');
    var ctx=canvas.getContext('2d');
    var ctx1=canvas01.getContext('2d');
    var ctx3=canvas03.getContext('2d');
    var ctx2=canvas02.getContext('2d');
    createCircle();
    createCirText();
    initPoint();

    //外圆
    function createCircle(){
      var startAngle = 0;//扇形的开始弧度
      var endAngle = 0;//扇形的终止弧度
      //画一个8等份扇形组成的圆形
      for (var i = 0; i< 8; i++){
        startAngle = Math.PI*(i/4-1/8);
        endAngle = startAngle+Math.PI*(1/4);
        ctx.save();
        ctx.beginPath();
        ctx.arc(150,150,100, startAngle, endAngle, false);
        ctx.lineWidth = 120;
        if (i%2 == 0) {
          ctx.strokeStyle = color[0];
        }else{
          ctx.strokeStyle = color[1];
        }
        ctx.stroke();
        ctx.restore();
      }
    }

    //各奖项
    function createCirText(){  
      ctx.textAlign='start';
      ctx.textBaseline='middle';
      ctx.fillStyle = color[3];
      var step = 2*Math.PI/8;
      for ( var i = 0; i < 8; i++) {
        ctx.save();
        ctx.beginPath();
        ctx.translate(150,150);
        ctx.rotate(i*step);
        ctx.font = " 20px Microsoft YaHei";
        ctx.fillStyle = color[3];
        ctx.fillText(info[i],-30,-115,60);
        ctx.font = " 14px Microsoft YaHei";
        ctx.fillText(info1[i],-30,-95,60);
        ctx.closePath();
        ctx.restore();
      }
    }

    function initPoint(){
      //箭头指针
      ctx1.beginPath();
      ctx1.moveTo(100,24);
      ctx1.lineTo(90,62);
      ctx1.lineTo(110,62);
      ctx1.lineTo(100,24);
      ctx1.fillStyle = color[5];
      ctx1.fill();
      ctx1.closePath();
      //中间小圆
      ctx3.beginPath();
      ctx3.arc(100,100,40,0,Math.PI*2,false);
      ctx3.fillStyle = color[5];
      ctx3.fill();
      ctx3.closePath();
      //小圆文字
      ctx3.font = "Bold 20px Microsoft YaHei";
      ctx3.textAlign='start';
      ctx3.textBaseline='middle';
      ctx3.fillStyle = color[4];
      ctx3.beginPath();
      ctx3.fillText('开始',80,90,40);
      ctx3.fillText('抽奖',80,110,40);
      ctx3.fill();
      ctx3.closePath();
      //中间圆圈
      ctx2.beginPath();
      ctx2.arc(75,75,75,0,Math.PI*2,false);
      ctx2.fillStyle = color[2];
      ctx2.fill();
      ctx2.closePath();
    }
  }
});
</script>
</head>
<body>
<div class="xttblog_box">
  <canvas id="xttblog" width="300px" height="300px">抱歉!浏览器不支持。</canvas>
  <canvas id="xttblog01" width="200px" height="200px">抱歉!浏览器不支持。</canvas>
  <canvas id="xttblog03" width="200px" height="200px">抱歉!浏览器不支持。</canvas>
  <canvas id="xttblog02" width="150px" height="150px">抱歉!浏览器不支持。</canvas>
  <button id="tupBtn" class="taoge_btn"></button>
</div>
<!-- 更改系统默认弹窗 -->
<script type="text/javascript">
window.alert = function(str)
{
  var shield = document.createElement("DIV");
  shield.id = "shield";
  shield.style.position = "absolute";
  shield.style.left = "50%";
  shield.style.top = "50%";
  shield.style.width = "280px";
  shield.style.height = "150px";
  shield.style.marginLeft = "-140px";
  shield.style.marginTop = "-110px";
  shield.style.zIndex = "25";
  var alertFram = document.createElement("DIV");
  alertFram.id="alertFram";
  alertFram.style.position = "absolute";
  alertFram.style.width = "280px";
  alertFram.style.height = "150px";
  alertFram.style.left = "50%";
  alertFram.style.top = "50%";
  alertFram.style.marginLeft = "-140px";
  alertFram.style.marginTop = "-110px";
  alertFram.style.textAlign = "center";
  alertFram.style.lineHeight = "150px";
  alertFram.style.zIndex = "300";
  strHtml = "<ul style="list-style:none;margin:0px;padding:0px;width:100%">n";
  strHtml += " <li style="background:#626262;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;color:white">[中奖提醒]</li>n";
  strHtml += " <li style="background:#787878;text-align:center;font-size:12px;height:95px;line-height:95px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;color:#DCC722">"+str+"</li>n";
  strHtml += " <li style="background:#626262;text-align:center;font-weight:bold;height:30px;line-height:25px; border:1px solid #F9CADE;"><input type="button" value="确 定" onclick="doOk()" style="width:80px;height:20px;background:#626262;color:white;border:1px solid white;font-size:14px;line-height:20px;outline:none;margin-top: 4px"/></li>n";
  strHtml += "</ul>n";
  alertFram.innerHTML = strHtml;
  document.body.appendChild(alertFram);
  document.body.appendChild(shield);
  this.doOk = function(){
    alertFram.style.display = "none";
    shield.style.display = "none";
  }
  alertFram.focus();
  document.body.onselectstart = function(){return false;};
}
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

原文地址:

方法一,

html代码

1.实现的基本效果

您可能感兴趣的文章:

  • JavaScript 抽奖效果实现代码 数字跳动版
  • javascript 随机抽奖程序代码
  • JS模拟抽奖序效果实现代码
  • js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
  • js抽奖实现随机抽奖代码效果
  • javascript圆盘抽奖程序实现原理和完整代码例子
  • js简单抽奖代码
  • js实现简单随机抽奖的方法
  • js实现大转盘抽奖游戏实例

HTML5 Canvas实现圆盘抽奖功能,html5canvas 我们经常参加各种电商优惠活动,比如购买达到一定数额进行抽奖活动,在比如微信抽奖,...

<script> 
function checkhHtml5() {  
if (typeof(Worker) !== "undefined") {  alert("支持HTML5");  }  else {  alert("不支持HTML5");  } } 
</script>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>小飞龙的跳球</title>
  </head>
  <body onload="init()">
    <canvas id="game" width="400" height="400" style="border:1px solid #c3c3c3">
      你的游览器不支持html5的画布元素,请升级到IE9+或使用firefox、chrome这类高级的智能游览器!
    </canvas>
    <script>
      var canvas = document.getElementById('game');
      var ctx = canvas.getContext('2d');
      var grad;
      //盒子的起始位置和大小以及球的半径
      var box = {x:20,y:20,w:350,h:350,r:20};
      //球的中心位置和偏移位置
      var inbox = {//box内的限制范围
          bx:(box.w+box.x-box.r),
          by:(box.h+box.y-box.r),
          ix:box.x+(box.r*2),
          iy:box.y+(box.r*2)
        };
      //球的初始位置和变化位置  
      var ball = {x:50,y:50,vx:4,vy:8};
      var img = new Image();
      img.src = 'images/qiuqiu.png';
      var hue = [[255,0,0],[255,255,0],[0,255,0],[0,255,255],[0,0,255],[255,0,0]];
      function init(){
        grad = ctx.createLinearGradient(box.x,box.y,box.w,box.h);
        for(var i=0;i<hue.length;i++){
          var color = 'rgb('+hue[i][0]+','+hue[i][1]+','+hue[i][2]+')';
          grad.addColorStop(i/hue.length,color);
        }
        ctx.lineWidth = box.r;
        ctx.fillStyle = 'rgb(200,0,50)';
        ctx.fillStyle = grad;
        moveBall();
        setInterval(moveBall,50);
      }  
      //碰撞检测并重新确定球的位置
      function moveBallEndCheck(){
        var nx = ball.x + ball.vx;
        var ny = ball.y + ball.vy;
        if(nx > inbox.bx){//当前x大于上边框边界
          ball.vx = -ball.vx;//球的变化x坐标当前当前变化x坐标的负数
          nx = inbox.bx;//当前位置为上边框的位置
        }
        if(nx < inbox.ix){//当前位置小于下边框
          nx = inbox.ix;//当前位置为下边框的x
          ball.vx = -ball.vx;//球的变化x坐标翻转取负
        }
        if(ny > inbox.by){
          ny = inbox.by;
          ball.vy = -ball.vy;
        }
        if(ny < inbox.iy){
          ny = inbox.iy;
          ball.vy = -ball.vy;
        }
        ball.x = nx;
        ball.y = ny;
      }
      function moveBall(){
        ctx.clearRect(box.x,box.y,box.w,box.h);
        moveBallEndCheck();
        ctx.beginPath();
        //console.log(ball.x+"t"+ball.y+"t"+ball.vx+"t"+ball.vy+"t"+(ball.x-box.r)+"t"+(ball.y-box.r));
        ctx.drawImage(img,(ball.x-box.r),(ball.y-box.r));
        ctx.fillRect(box.x,box.y,box.r,box.h);
        ctx.fillRect((box.x+box.w-box.r),box.y,box.r,box.h);
        ctx.fillRect(box.x,box.y,box.w,box.r);
        ctx.fillRect(box.x,(box.y+box.h-box.r),box.w,box.r);
        ctx.closePath();
        ctx.fill();
      }
    </script>
  </body>
</html>

 图片 3

方法二,

演示图片

2.主要的内容

<canvas id="Canvas" ></canvas>

<script>  if (!document.getElementById("Canvas").getContext) {   alert("不支持html5");  }  else{ alert("支持html5"); } </script>

图片 4

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

方法三:

以上所述就是本文的全部代码,希望大家能够喜欢。

3.主要html代码

<script>
window.onload = function() {
  if (!window.applicationCache) {
    alert("你的浏览器不支持HTML5!");
  }
}
</script>

您可能感兴趣的文章:

  • js+html5获取用户地理位置信息并在Google地图上显示的方法
  • 原生js结合html5制作简易的双色子游戏
  • js判断浏览器是否支持html5
  • 使用非html5实现js板连连看游戏示例代码
  • JS HTML5 音乐天气播放器(Ajax获取天气信息)
  • js模仿html5 placeholder适应于不支持的浏览器
  • js+html5绘制图片到canvas的方法
 <body>
  <div class="content">
    <div class="wheel">
      <canvas class="item" id="wheelCanvas" width="422px" height="422px"></canvas>
      <img class="pointer" src="images/wheel-pointer.png"/>
    </div>
  </div>
  <div class="tips" >
    jason
  </div>
</body>
</html>

有更好的方法的话,请联系我!谢谢

4.主要的css代码

您可能感兴趣的文章:

  • AngularJS中使用HTML5手机摄像头拍照
  • js+html5实现可在手机上玩的拼图游戏
  • js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
  • 用html5 js实现点击一个按钮达到浏览器全屏效果
  • javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
  • javascript使用百度地图api和html5特性获取浏览器位置
  • js模仿html5 placeholder适应于不支持的浏览器
  • html5 canvas js(数字时钟)实例代码
  • JS HTML5 音乐天气播放器(Ajax获取天气信息)
  • javascript基于HTML5 canvas制作画箭头组件
  • html5+javascript制作简易画板附图
  • 使用js检测浏览器是否支持html5中的video标签的方法
  • JS+HTML5手机开发之滚动和惯性缓动实现方法分析
 .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代码

/*
 * 渲染转盘
 * */
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,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, canvasH * 0.5, turnWheel.insideRadius, angle + baseAngle, angle, 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,y,maxWidth);
     * 注意!!!y是文字的最底部的值,并不是top的值!!!
     * */
    if(rewardName.indexOf("M")>0){//查询是否包含字段 流量包
      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){//奖品名称长度超过一定范围
      rewardName = rewardName.substring(0,6)+"||"+rewardName.substring(6);
      var rewardNames = rewardName.split("||");
      for(var j = 0; j<rewardNames.length; j++){
        ctx.fillText(rewardNames[j], -ctx.measureText(rewardNames[j]).width / 2, 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,-15,10);

    }else if(rewardName.indexOf("谢谢参与")>=0){
      imgSorry.onload=function(){
        ctx.drawImage(imgSorry,-15,10);
      };
      ctx.drawImage(imgSorry,-15,10);
    }
    //还原画板的状态到上一个save()状态之前
    ctx.restore();

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

  }
}

最后
这玩意和IOS里面的Quartz2D技术几乎一样....
详细代码>>>>点击下载.rar) 

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

您可能感兴趣的文章:

  • JS+HTML5 Canvas实现简单的写字板功能示例
  • Javascript HTML5 Canvas实现的一个画板
  • html5+javascript制作简易画板附图
  • javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
  • JS+html5 canvas实现的简单绘制折线图效果示例
  • js+html5实现canvas绘制圆形图案的方法
  • js+html5实现canvas绘制镂空字体文本的方法
  • js+html5绘制图片到canvas的方法
  • javascript+HTML5 Canvas绘制转盘抽奖
  • JavaScript+html5 canvas绘制的小人效果
  • 原生JS+HTML5实现的可调节写字板功能示例

本文由美高梅网址发布于关于美高梅,转载请注明出处:原生js结合html5制作小飞龙的简易跳球,Canvas绘制

上一篇:js实现汉字排序的方法,javascript对中文按照拼音 下一篇:没有了
猜你喜欢
热门排行
精彩图文