JavaScript HTML5 Canvasにディスク抽選機能を実装_JavaScriptスキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript HTML5 Canvasにディスク抽選機能を実装_JavaScriptスキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:06 PM

canvashtml5javascript宝くじ

当社は、WeChat宝くじ、淘宝宝くじ、Xunlei Money Makingディスク宝くじなど、購入が一定量に達した場合の抽選活動など、さまざまな電子商取引優遇活動に頻繁に参加しています。これらの抽選アクティビティの一部は HTML5 Canvas によって生成されます。今日は、HTML5 Canvas を使用してディスク抽選機能を作成する方法を説明します。いつものように、最初にレンダリングを見てみましょう:

Canvas の主要な API をいくつか見てみましょう:

完全なソースコードは次のとおりです:

<!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>

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。

元のアドレス: http://www.xttblog.com/?p=399

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

WebStorm Mac版

便利なJavaScript開発ツール

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。