Javascript 使用画布创建进度条

我使用Canvas创建了一个进度条，它接受一个滑块值并填充进度。这将使用覆盖图像创建填充。下面列出了我的代码

不过，我遇到了一个问题，因为我不希望进度条使用滑块。我只是使用滑块进行测试。我真正想做的是将其用作XP（体验）指标。我在Joomla站点上运行php，它获取当前用户id、组id及其当前xp值。我希望能够访问此用户信息，以填充基于当前用户xp的进度栏。更进一步，我想告诉酒吧，如果用户组id是11（级别1），那么要填充的xp范围应该是0xp-9xp。如果用户组id为12（级别2），则xp范围应为10xp-99xp，依此类推

我肯定可以用一些方向，至少让我开始。我的思路是：如果用户组是11，那么xpRange=9，progress=xpValue/xpRange

HTML:

Javascript:

<script language="javascript" type="text/javascript">


function init() {

canvas = document.getElementById('progress');

// Create the image resource
img = new Image();

// Canvas supported?
if (canvas.getContext) {

ctx = canvas.getContext('2d');
slider = document.getElementById('slider');

// Setup the onload event
img.onload = drawImage;

// Load the image
img.src = '../images/xpBar.png';

} else {
alert("Canvas not supported!");
}
}

function drawImage() {

// Draw the base image - no progress
drawBase(ctx);

// Draw the progress segment level
drawProgress(ctx);

}

var img, 
iHEIGHT = 50, 
iWIDTH = 240, 
canvas = null, 
ctx = null;
slider = null;

function drawBase(ctx) {

ctx.drawImage(img, 0, 0, iWIDTH, iHEIGHT, 0, 0, iWIDTH, iHEIGHT);

}

function drawProgress(ctx) {

var x1 = 0, // X position where the progress segment starts
x2 = 240, // X position where the progress segment ends
s = slider.value,
x3 = 0,

// Calculated x position where the overlayed image should end

x3 = (x1 + ((x2 - x1) / 100) * s);

ctx.drawImage(img, 0, iHEIGHT, x3, iHEIGHT, 0, 0, x3, iHEIGHT);

}


</script>

函数init（）{
canvas=document.getElementById（'progress'）；
//创建图像资源
img=新图像（）；
//支持画布？
if（canvas.getContext）{
ctx=canvas.getContext（'2d'）；
slider=document.getElementById（'slider'）；
//设置onload事件
img.onload=绘图图像；
//加载图像
img.src='../images/xpBar.png'；
}否则{
警报（“不支持画布！”）；
}
}
函数drawImage（）{
//绘制基础图像-无进展
退税（ctx）；
//绘制进度段级别
提取进度（ctx）；
}
var img，
iHEIGHT=50，
iWIDTH=240，
canvas=null，
ctx=null；
滑块=空；
功能缺陷（ctx）{
ctx.drawImage（img，0，0，iWIDTH，iHEIGHT，0，0，iWIDTH，iHEIGHT）；
}
功能提取进度（ctx）{
var x1=0，//X进度段开始的位置
x2=240，//X进度段结束的位置
s=滑块值，
x3=0，
//计算出重叠图像应结束的x位置
x3=（x1+（（x2-x1）/100）*s）；
ctx.drawImage（img，0，iHEIGHT，x3，iHEIGHT，0，0，x3，iHEIGHT）；
}

任何帮助都将不胜感激

1）对于级别，您所说的“等等”是什么意思？三级的射程是多少？如果组id为13（3级），xp范围应为100xp-999xp。如果组id为14（4级），则xp范围应为1000xp-9999xp。如果组id为15（级别5），则xp范围应为10000xp-99999 xp。如果组id为16（级别6），则xp范围应为10000XP-999999 xp。组id 17（级别7）大于1000000xp。我对小提琴制作知之甚少。你能为我推荐一本入门教程或手册吗？

<script language="javascript" type="text/javascript">


function init() {

canvas = document.getElementById('progress');

// Create the image resource
img = new Image();

// Canvas supported?
if (canvas.getContext) {

ctx = canvas.getContext('2d');
slider = document.getElementById('slider');

// Setup the onload event
img.onload = drawImage;

// Load the image
img.src = '../images/xpBar.png';

} else {
alert("Canvas not supported!");
}
}

function drawImage() {

// Draw the base image - no progress
drawBase(ctx);

// Draw the progress segment level
drawProgress(ctx);

}

var img, 
iHEIGHT = 50, 
iWIDTH = 240, 
canvas = null, 
ctx = null;
slider = null;

function drawBase(ctx) {

ctx.drawImage(img, 0, 0, iWIDTH, iHEIGHT, 0, 0, iWIDTH, iHEIGHT);

}

function drawProgress(ctx) {

var x1 = 0, // X position where the progress segment starts
x2 = 240, // X position where the progress segment ends
s = slider.value,
x3 = 0,

// Calculated x position where the overlayed image should end

x3 = (x1 + ((x2 - x1) / 100) * s);

ctx.drawImage(img, 0, iHEIGHT, x3, iHEIGHT, 0, 0, x3, iHEIGHT);

}


</script>