做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
接下来就是给饼图添加点击事件。。。。由于时间关系。。。
网友评论