ART 210: CANVAS HTML5: WORKING WITH ARCS

HTML5 CODE:

<!DOCTYPE HTML>

<html>

<head>

<title> Turtle </title>

body,td,th {

font-family: Helvetica, Arial, sans-serif;

font-size: 12px;

color: #000;

}

body {

background-color: #FFF;

}

</style>

</head>

<body>

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE

//tail

context.beginPath();

context.moveTo(270,170);

context.lineTo(290,165);

context.lineTo(275,180);

context.lineTo(270,170);

context.lineWidth = 2;

context.fillStyle = "green";

context.strokeStyle = "green";

context.fill();

context.stroke();

context.closePath();

//SHELL

context.beginPath();

context.arc(200,200,75,0,Math.PI,true);

context.lineWidth = 4;

context.fillStyle = "rgb(79,69,6)";

context.strokeStyle = "rgb(66,58,4)";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(180,130);

context.lineTo(190,140);

context.lineTo(210,140);

context.lineTo(220,130);

context.lineWidth = 3;

context.fillStyle = "tan";

context.strokeStyle = "tan";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(190,150);

context.lineTo(210,150);

context.lineTo(220,160);

context.lineTo(210,170);

context.lineTo(190,170);

context.lineTo(180,160);

context.lineTo(190,150);

context.lineWidth = 3;

context.fillStyle = "tan";

context.strokeStyle = "tan";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(190,180);

context.lineTo(210,180);

context.lineTo(220,190);

context.lineTo(210,200);

context.lineTo(190,200);

context.lineTo(180,190);

context.lineTo(190,180);

context.lineWidth = 3;

context.fillStyle = "tan";

context.strokeStyle = "tan";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(240,180);

context.lineTo(260,180);

context.lineTo(270,190);

context.lineTo(260,200);

context.lineTo(240,200);

context.lineTo(230,190);

context.lineTo(240,180);

context.lineWidth = 3;

context.fillStyle = "tan";

context.strokeStyle = "tan";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(140,180);

context.lineTo(160,180);

context.lineTo(170,190);

context.lineTo(160,200);

context.lineTo(140,200);

context.lineTo(130,190);

context.lineTo(140,180);

context.lineWidth = 3;

context.fillStyle = "tan";

context.strokeStyle = "tan";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(230,160);

context.lineTo(240,150);

context.lineTo(250,150);

context.lineTo(255,160);

context.lineTo(250,170);

context.lineTo(240,170);

context.lineTo(230,160);

context.lineWidth = 3;

context.fillStyle = "tan";

context.strokeStyle = "tan";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(170,160);

context.lineTo(160,150);

context.lineTo(150,150);

context.lineTo(140,160);

context.lineTo(150,170);

context.lineTo(160,170);

context.lineTo(170,160);

context.lineWidth = 3;

context.fillStyle = "tan";

context.strokeStyle = "tan";

context.fill();

context.stroke();

context.closePath();

///leg 1

context.beginPath();

context.moveTo(150,200);

context.lineTo(170,200);

context.lineTo(170,220);

context.lineTo(150,220);

context.lineTo(150,200);

context.lineWidth = 3;

context.fillStyle = "green";

context.strokeStyle = "green";

context.fill();

context.stroke();

context.closePath();

//leg 2

context.beginPath();

context.moveTo(230,200);

context.lineTo(250,200);

context.lineTo(250,220);

context.lineTo(230,220);

context.lineTo(230,200);

context.lineWidth = 3;

context.fillStyle = "green";

context.strokeStyle = "green";

context.fill();

context.stroke();

context.closePath();

///bottom of shell

context.beginPath();

context.moveTo(115,200);

context.lineTo(285,200);

context.lineWidth = 10;

context.lineCap = "round";

context.strokeStyle = "rgb(66,58,4)";

context.stroke();

context.closePath();

//face

context.beginPath();

context.arc(105,140,40,0,2*Math.PI,false);

context.fillStyle = "green";

context.lineWidth = 5;

context.fill();

context.stroke();

context.closePath();

//SMILE

context.beginPath();

context.arc(105,145,20,0,Math.PI,false);

context.lineWidth = 3;

context.strokeStyle = "black";

context.stroke();

context.closePath();

//eye 1

context.beginPath();

context.arc(90,130,10,0,2*Math.PI,false);

context.fillStyle = "white";

context.fill();

context.stroke();

context.closePath();

//eye 2

context.beginPath();

context.arc(120,130,10,0,2*Math.PI,false);

context.fillStyle = "white";

context.fill();

context.stroke();

context.closePath();

//eye 1

context.beginPath();

context.arc(90,130,5,0,2*Math.PI,false);

context.fillStyle = "black";

context.fill();

context.stroke();

context.closePath();

//eye 2

context.beginPath();

context.arc(120,130,5,0,2*Math.PI,false);

context.fillStyle = "black";

context.fill();

context.stroke();

context.closePath();

//nose 1

context.beginPath();

context.arc(100,148,1,0,2*Math.PI,false);

context.fillStyle = "black";

context.fill();

context.stroke();

context.closePath();

//nose 2

context.beginPath();

context.arc(110,148,1,0,2*Math.PI,false);

context.fillStyle = "black";

context.fill();

context.stroke();

context.closePath();

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE

</script>

</body>

</html>

ART 210

Tuesday, September 15, 2015

CANVAS HTML5: WORKING WITH ARCS

No comments:

Post a Comment