English
English
In PHP, imagefilledarc is a very useful function, commonly used for drawing filled sectors or arcs. With this, we can easily create an arc-shaped progress bar. If we can make this progress bar interactive with dynamic display, the user experience will be enhanced and the visual effect will be even more stunning.
This article will detail how to use imagefilledarc to create an interactive arc-shaped progress bar and implement dynamic progress visual effects.
The syntax of the imagefilledarc function is as follows:
imagefilledarc(
resource $image,
int $cx,
int $cy,
int $width,
int $height,
int $start,
int $end,
int $color,
int $style
): bool
$image: The image resource.
$cx, $cy: The coordinates of the arc's center point.
$width, $height: The width and height of the arc's ellipse.
$start, $end: The start and end angles (in degrees, where 0 degrees points to the 3 o'clock direction, and counterclockwise is positive).
$color: The fill color.
$style: The drawing style, typically IMG_ARC_PIE for drawing sectors.
The following code example draws an arc progress bar with a 75% completion rate.
<?php
header("Content-Type: image/png");
<p>$width = 200;<br>
$height = 200;<br>
$image = imagecreatetruecolor($width, $height);</p>
<p>$bg_color = imagecolorallocate($image, 255, 255, 255);<br>
$bar_color = imagecolorallocate($image, 50, 150, 250);<br>
$gray_color = imagecolorallocate($image, 230, 230, 230);</p>
<p>imagefill($image, 0, 0, $bg_color);</p>
<p>// Draw the gray bottom arc representing the total progress<br>
imagefilledarc($image, $width/2, $height/2, 150, 150, 0, 360, $gray_color, IMG_ARC_PIE);</p>
<p>// Dynamic progress at 75%<br>
$progress = 75;<br>
$end_angle = ($progress / 100) * 360;</p>
<p>// Draw the colored progress arc<br>
imagefilledarc($image, $width/2, $height/2, 150, 150, 0, $end_angle, $bar_color, IMG_ARC_PIE);</p>
<p>imagepng($image);<br>
imagedestroy($image);<br>
?><br>
PHP is a server-side language and cannot directly control client-side interactions or dynamic changes. However, we can pass parameters so that users can input progress values, then request the PHP script again to output the corresponding progress image.
For example, the frontend page passes the progress parameter via AJAX or a form:
http://m66.net/progress.php?value=60
The PHP script receives the value parameter and generates the corresponding progress bar.
<?php
// progress.php
$value = isset($_GET['value']) ? intval($_GET['value']) : 0;
if ($value < 0) $value = 0;
if ($value > 100) $value = 100;
<p>header("Content-Type: image/png");</p>
<p>$width = 200;<br>
$height = 200;<br>
$image = imagecreatetruecolor($width, $height);</p>
<p>$bg_color = imagecolorallocate($image, 255, 255, 255);<br>
$bar_color = imagecolorallocate($image, 50, 150, 250);<br>
$gray_color = imagecolorallocate($image, 230, 230, 230);</p>
<p>imagefill($image, 0, 0, $bg_color);</p>
<p>imagefilledarc($image, $width/2, $height/2, 150, 150, 0, 360, $gray_color, IMG_ARC_PIE);</p>
<p>$end_angle = ($value / 100) * 360;<br>
imagefilledarc($image, $width/2, $height/2, 150, 150, 0, $end_angle, $bar_color, IMG_ARC_PIE);</p>
<p>imagepng($image);<br>
imagedestroy($image);<br>
?><br>
Then, in HTML, use JavaScript to periodically refresh the image to create the dynamic progress bar effect:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Interactive Arc Progress Bar Demo</title>
</head>
<body>
<img id="arcProgress" src="http://m66.net/progress.php?value=0" alt="Progress Bar" />
<br/>
<button onclick="startProgress()">Start Progress</button>
let progress = 0;
let timer;
function startProgress() {
if (timer) clearInterval(timer);
progress = 0;
timer = setInterval(() => {
if (progress > 100) {
clearInterval(timer);
return;
}
document.getElementById('arcProgress').src = `http://m66.net/progress.php?value=${progress}&t=${Date.now()}`;
progress += 2;
}, 100);
}
</script>