Lab8 PW

//EX1
<html>
<head>
	<title>lab8</title>
</head>

	<body>
	<canvas id="canvas" width="600" height="600"></canvas>
	<script>


	//Exemplu lab:
	/*	var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		for (var i=0; i<8; i++) {
			ctx.fillRect( i *10, i*10, 10, 10);
		}
		*/
	// exercitiu 1

		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		for (var i=0; i<1; i++){
			ctx.fillRect(70, 0, 60, 60);
			ctx.fillRect(95, 60, 10, 30);
			ctx.fillRect(0, 90, 200, 10);
			ctx.fillRect(45, 100, 100, 100);
			ctx.fillRect(45, 100, 100, 100);
			ctx.fillRect(45, 200, 20, 85);
			ctx.fillRect(125, 200, 20, 85);
		}
	</script>
	</body>
</html>

//EX2
<html>
<head>
	<title>lab8</title>
</head>

	<body>
	<canvas id="canvas" width="600" height="600"></canvas>
	<script>

	//exercitiu 2
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		for (var i=0; i<1; i++){
			ctx.fillRect(0, 0, 100, 50);
			ctx.fillStyle = "#008B8B";
			ctx.fillRect(0, 50, 100, 50);
			ctx.fillStyle = "#DC143C";
			ctx.fillRect(100, 0, 100, 50);
			ctx.fillStyle = "#E9967A";
			ctx.fillRect(100, 50, 100, 50);
			ctx.fillStyle = "#8FBC8F"
		}

	</script>
	</body>
</html>

//EX3
<html>
<head>
	<title>lab8</title>
</head>

	<body>
	<canvas id="canvas" width="600" height="600"></canvas>
	<script>

	//exemplu cercuri colorate

	/*	var canvas = document.getElementById("canvas");
			var ctx = canvas.getContext("2d");

			var circle = function (x, y, radius){
			ctx.beginPath();
			ctx.arc(x, y, radius, 0, Math.PI *2, false);
			ctx.stroke();
			};
			ctx.lineWidth = 4;

			ctx.strojkeStyle = "Red";
			circle(100, 100, 10);
			ctx.strokeStyle = "Orange";
			circle(100, 100, 20);
			ctx.strokeStyle = "Yellow";
			circle(100, 100, 30);
			ctx.strokeStyle = "Green";
			circle(100, 100, 40);
			ctx.strokeStyle = "Blue";
			circle(100, 100, 50);
			ctx.strokeStyle = "Purple";
			circle(100, 100, 60);
	*/

	//exercitiul3

		var canvas = document.getElementById("canvas");
			var ctx = canvas.getContext("2d");
			ctx.strokeStyle = "#008000";
			ctx.lineWidth = 4;
			ctx.strokeRect(30, 4, 20, 20);

			ctx.beginPath()
			ctx.moveTo(40, 24);
			ctx.lineTo(40, 100);
			ctx.stroke();

			ctx.beginPath()
			ctx.moveTo(40, 60);
			ctx.lineTo(20, 30);
			ctx.stroke();

			ctx.beginPath()
			ctx.moveTo(40, 60);
			ctx.lineTo(60, 30);
			ctx.stroke();

			ctx.beginPath()
			ctx.moveTo(40, 100);
			ctx.lineTo(20, 130);
			ctx.stroke();

			ctx.beginPath()
			ctx.moveTo(40, 100);
			ctx.lineTo(60, 130);
			ctx.stroke()

	</script>
	</body>
</html>

//EX4
<html>
<head>
	<title>lab8</title>
</head>

	<body>
	<canvas id="canvas" width="600" height="600"></canvas>
	<script>

	//exercitiul4

        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.lineWidth = 4;
        var circle = function (x, y, radius, foo) {
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, Math.PI * 2, false);
            ctx.stroke();
            if (foo === true) {
                ctx.fill();
            }
        };

		//corp
        circle(200,100,40,false);
        circle(200,200,60,false);
		//nas
        ctx.fillStyle = "Orange";
        ctx.strokeStyle = "Orange";
        circle(200,110,5,true);
		//ochi si nasturi
        ctx.fillStyle = "Black";
        ctx.strokeStyle = "Black";
		circle(185,93,5,true);
        circle(215,93,5,true);
        circle(200,200,5,true);
        circle(200,170,5,true);
        circle(200,230,5,true);