做iOS開發，公司要求寫5個h5小游戲，其中一個就是我們所熟悉的大轉盤。
一開始覺得很簡單的一個小游戲，但完成了兩款小游戲時候，發現大轉盤不是很簡單。日了個狗。于是就慢慢開始分析。
這里由于隱私，我就不上轉盤圖。我自己可以畫一張給你們看
01.png
一個簡單的大轉盤游戲吧，一個箭頭在固定位置，然后順時針旋轉。就這樣的一個簡單功能。一點點完成吧。
1、首先我覺得你要畫一個弧餅圖，各種翻找資料。其實很簡單，無奈自己根本不是很會js，更不懂js里面的畫圖方法。百度一下，找到畫弧的函數，自己在琢磨一下，就畫出一個弧餅圖了，上代碼（本次代碼，都是純純的js代碼+jq框架）
html前端代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/game.js"></script>
<title></title>
</head>
<body>
</body>
</html>
js代碼
$(document).ready(function(){
drawPie();
});
//畫圖
function drawPie(){
//添加畫圖容器
var canvas= $('<canvas></canvas>');
canvas.attr("id","myCanvas");
canvas.css("position","relative");
canvas.css("margin-left",100);
canvas.css("margin-top",100);
canvas.attr("width",300);
canvas.attr("height",300);
canvas.css("border","solid #ff9b00 1px");
canvas.appendTo($("body"));
}
畫弧餅
$(document).ready(function(){
drawPie();
});
//畫圖
function drawPie(){
//添加畫圖容器
var canvas= $('<canvas></canvas>');
canvas.attr("id","myCanvas");
canvas.css("position","relative");
canvas.css("margin-left",100);
canvas.css("margin-top",100);
canvas.attr("width",300);
canvas.attr("height",300);
canvas.css("border","solid #ff9b00 1px");
canvas.appendTo($("body"));
//圓形坐標半徑
var circle = {
x : 100, //圓心的x軸坐標值
y : 100, //圓心的y軸坐標值
r : 50 //圓的半徑
};
///////////增加的代碼行
//弧度
var hu = {
sAngle: 0,
eAngle: 0.25*Math.PI
}
//獲取之前創建的canvas
var canvas=document.getElementById('myCanvas');
//判斷瀏覽器支持畫圖
if(canvas.getContext){
//獲取對應的CanvasRenderingContext2D對象(畫筆)
var ctx = canvas.getContext("2d");
//開始一個新的繪制路徑
ctx.beginPath();
//設置弧線的顏色為透明
ctx.strokeStyle = "rgba(0,0,0,0)";
//連接終點線
ctx.lineTo(100, 100);
//沿著坐標點(100,100)為圓心、半徑為50px的圓的順時針方向繪制弧線
ctx.arc(circle.x, circle.y, circle.r, 0, 0.25*Math.PI, false);
//連接終點線
ctx.lineTo(100, 100);
ctx.closePath();
ctx.fillStyle = "rgb(2,100,30)";
ctx.fill();
}
}
02.png
繪制整個圓形弧度
$(document).ready(function(){
drawPie();
});
//畫圖
function drawPie(){
//添加畫圖容器
var canvas= $('<canvas></canvas>');
canvas.attr("id","myCanvas");
canvas.css("position","relative");
canvas.css("margin-left",100);
canvas.css("margin-top",100);
canvas.attr("width",300);
canvas.attr("height",300);
canvas.css("border","solid #ff9b00 1px");
canvas.appendTo($("body"));
var canvas=document.getElementById('myCanvas');
//圓形坐標半徑
var circle = {
x : 100, //圓心的x軸坐標值
y : 100, //圓心的y軸坐標值
r : 50 //圓的半徑
};
//弧度
var hus = [];
for(var i = 0; i < 8; i++){
var hu = {
sAngle: i*(0.25*Math.PI),
eAngle: (i+1)*0.25*Math.PI
}
hus[i] = hu;
}
//顏色
var colors = [];
for(var i = 0; i < 8; i++){
var rgb = "rgb("+GetRandomNum(0,255)+","+GetRandomNum(0,255)+","+GetRandomNum(0,255)+")";
colors[i] = rgb;
}
//獲取之前創建的canvas
var canvas=document.getElementById('myCanvas');
//判斷瀏覽器支持畫圖
if(canvas.getContext){
//獲取對應的CanvasRenderingContext2D對象(畫筆)
var ctx = canvas.getContext("2d");
draw(ctx);
}
function draw(ctx){
for(var i = 0; i < hus.length; i++){
ctx.beginPath();
//設置弧線的顏色為透明
ctx.strokeStyle = colors[i];
//連接終點線
ctx.lineTo(100, 100);
//沿著坐標點(100,100)為圓心、半徑為50px的圓的順時針方向繪制弧線
ctx.arc(circle.x, circle.y, circle.r, hus[i]["sAngle"], hus[i]["eAngle"], false);
//連接終點線
ctx.lineTo(100, 100);
//填充顏色
ctx.fillStyle = colors[i];
ctx.fill();
}
}
}
//隨機整數
function GetRandomNum(Min,Max)
{
var Range = Max - Min;
var Rand = Math.random();
return(Min + Math.round(Rand * Range));
}
上圖
02.png
接下來就是給餅圖添加點擊事件。。。。由于時間關系。。。
