Question

我已经使用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：

<body onload='init();'>

<form id="drawForm">
<input id="slider" type="range" min="0" max="100" onchange="drawImage();"       
onkeyup="drawImage();" />
</form>
<canvas id="progress" width="670" height="161"></canvas>

使用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>

非常感谢任何帮助。

使用Canvas创建进度条

0 个答案: