Here is a straightforward example using PHP
:
<?php
// Create an empty image.
$image = imagecreatetruecolor(400, 300);
// Choose the background color.
$bg = imagecolorallocate($image, 0, 0, 0);
// Fill the background with the chosen color.
imagefill($image, 0, 0, $bg);
// Select a color for the ellipse.
$col_ellipse = imagecolorallocate($image, 255, 255, 255);
// Draw the ellipse.
imageellipse($image, 200, 150, $_GET['w'], $_GET['w'], $col_ellipse);
// Display the image.
header("Content-type: image/png");
imagepng($image);
?>
To use this script, you need to provide the parameter w
. For example: image.php?w=50
This code is inspired by this source.
Additionally, here is a small demonstration using JavaScript
and Canvas
:
<!DOCTYPE html>
<html>
<body>
canvas:
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
function getParameterByName(name){
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if(results == null)
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(50,50,getParameterByName("w"),0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
document.write('png:<img src="'+c.toDataURL("image/png")+'"/>');
</script>
</body>
</html>
In order to run this script, make sure to include the parameter w
. For instance: image.html?w=50
In my research, resources like this, this, and input from @Phrogz have been invaluable.