4
Contributors
7
Replies
9
Views
6 Years
Discussion Span
Last Post by ya.basha
0

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

0

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

0

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: n/a

0

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.

Edited by MrDJK: n/a

Attachments canvas.png 8.08 KB
0

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.