html5 canvas 绘制大转盘类似的游戏，并填充文

最新推荐文章于 2021-06-04 02:50:50 发布

zhanganbo

最新推荐文章于 2021-06-04 02:50:50 发布

阅读量2.1k

点赞数

文章标签： html5 canvas

本文链接：https://blog.youkuaiyun.com/zhanganbo/article/details/50804205

版权

本文介绍如何使用HTML5的Canvas API来创建一个具有8个扇形区域的大转盘游戏。内容涉及动态获取数据以实现游戏功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

>>>>>>>>>>>>>>最近在做一个大转盘游戏，要求游戏可以从数据库动态获得，图片完成不了此功能，需要利用html5 canvas 对象<<<<<<<<<<<<<<<<<<<<<<

一、首先需要先绘制一个圆形，这里我们画出带有8个扇形的圆

//画出转盘上的8个格

<pre name="code" class="html">var canvas = document.getElementById("circle");
var ctx = canvas.getContext("2d");
var color = ["#5FCBD4","#FFFFFF","#5FCBD4","#FFFFFF","#5FCBD4","#FFFFFF","#5FCBD4","#FFFFFF"];//颜色组合
function drawCircle(){
	var startPoint = 1.375 * Math.PI;//设置开始角，从3点钟算起
	for(var i=0;i<data.length;i++){
		ctx.fillStyle = color[i]; //设置填充颜色
		ctx.strokeStyle = color[i]; //绘制路径颜色
		ctx.beginPath();  //开始画图
		ctx.moveTo(150,150);//移动到圆心坐标
		ctx.arc(150,150,135,startPoint,startPoint+Math.PI*2*(data[i]/100),false);//画圆弧
		ctx.fill();
		ctx.stroke();
		startPoint += Math.PI*2*(data[i]/100);//改变弧度
	}
}

二、然后我们开始往圆8个扇形格子上面添加文字,这里我们处理了一下，防止格子上面的字体超出半径

//根据奖品数组画出转盘上的奖品

<pre name="code" class="html">var data = [12.5,12.5,12.5,12.5,12.5,12.5,12.5,12.5];//角度计算
var prizeName = [1,2,3,4,5,6,7,8];</span>
function drawPrize(){
	var prizeNameSimple;
	ctx.font = " bold 12px 黑体"; // 设置字体
	ctx.textAlign='start';//文本水平对齐方式
	ctx.textBaseline='middle';//文本垂直方向，基线位置
	ctx.fillStyle = "#000";// 设置填充颜色
	var step = 2*Math.PI/8;//8分之1圆的弧度
	for ( var i = 0; i < prizeName.length; i++) {
		ctx.save();
		ctx.beginPath();
		ctx.translate(150,150);//平移到圆心
		ctx.rotate(i*step);//从时钟15点处开始旋转弧度i*step
		if(prizeName[i].length>5){
			prizeNameSimple=prizeName[i].substring(0,6)+"..";
		}else{
			prizeNameSimple = prizeName[i];
		}
		ctx.fillText(prizeNameSimple,50,0,150);
		ctx.restore();
	}
}

三、这里补充html部分，只需要准备一个具有定宽高的canvas对象即可(记住如果在谷歌浏览器下浏览最好将js放在canvas标签下面，js放到body里面)

<canvas id="circle"  width="300" height="300">您的浏览器暂不支持Canvas</canvas>