Member Avatar for ya.basha

Hello Guys,

I need your help, I want to draw growing circles like a darts board and like attached picture using jQuery (I prefer) or another javascript library.

Regards,
[IMG]http://ayyash.info/Circles.jpg[/IMG]

Circles.jpg 22.62 KB
Edited by ya.basha because: n/a
  • 4 Contributors
  • 7 Replies
  • 1K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ya.basha
Member Avatar for ya.basha

ya.basha,

Try Raphaël or jsDraw2D

Airshow

I read about HTML5 canvas tag and saw some examples about it, but I want to know how to start working with html5

Member Avatar for Airshow

ya.basha,

I've not used it but the general approach is to download the lib to your hard disk (and upload to your web site if necessary), install it on your page with <script type="text/javascript" src="....."></script>, then follow the examples/documentation to make it draw what you want.

Airshow

Member Avatar for Airshow

Sorry, that's rubbish. I misread your post. I thought you were asking about one of the utilities for which I posted links. Doh!

I've not used HTML5's canvas yet but I'm sure there's good advice on the web.

Airshow

Edited by Airshow because: n/a
Member Avatar for MrDJK

Forgive the indentation, something weird happens copying and pasting from notepad++.

Very simple, expanding circles, could be done a lot better, but I think it gives you an idea, I also attempted to get the colours right from your attached picture, which didn't go that well.
Sorry, really didn't see the need for jQuery.

<canvas id="circles"> <p> Sorry no support.</p> </canvas>
(function () {

	var canvas = document.getElementById('circles');
	if ( canvas.getContext ) {
		var strokeColours = ['#584A34', '#828865', '#5B5466', '#52807C', '#B9896D'],
			circles = canvas.getContext('2d');
		
		for (var i = 0; i < 5; i++ ) {
			
			var arcRadius = (i === 0) ? 15 : i * 15;
			
			circles.beginPath();
			circles.arc(100, 80, arcRadius, 0, Math.PI * 2, true);
			circles.closePath();
			
			//Stroke colours set in the array above (in order)
			circles.strokeStyle = strokeColours[i];
			circles.stroke();
			
			//Fill the first one, in a shade of green.
			if ( i === 0 ) { 
				circles.fillStyle = '#01af50';
				circles.fill();
			}
			
		}
		
	} 
	
})();

Output is attached.
-MrDJK.

canvas.png 8.08 KB
Edited by MrDJK because: n/a
Member Avatar for Luckychap

Here is simple javascript fucntion to draw circle. There no efficient algo used here.
But you can implement good and efficient algos.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>TV</title>
		
		<style>
			.pixel {
				position: absolute;
				width: 1px;
				height: 1px;
				background: red;
			}
		</style>		
		
		<script>
			function circle(x, y, r, c, parent) {
				var body = document.getElementsByTagName("body")[0];
				for(var i = 0; i < 361; i++) {
					var xp = x + Math.cos(i) * r;
					var yp = x + Math.sin(i)*r;
					
					var p = document.createElement("div");
					p.className = "pixel";
					p.style.left = xp + "px";
					p.style.top = yp + "px";
					if(c) p.style.background = c;
					
					if(parent) {
						parent.appendChild(p)
					} else {
						body.appendChild(p);
					}					
				}
			}			
			
			function init() {
				circle(100, 100, 50, "green");
				circle(100, 100, 40, "red");
				circle(100, 100, 30, "blue");
				circle(100, 100, 20, "orange");
				circle(100, 100, 10, "black");
				
			}
		</script>
		
	</head>
    
	<body onload="init();">
	</body>
</html>
Member Avatar for ya.basha

Thank you, I used html5 canvas you can check it on: http://ayyash.info/dxp4.html

I need help to draw small balls and and use drag & drop feature and snap the balls to the borders of the balls.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.