Canvas
For the Canvas assignment I attempted to code several shapes by trying to follow some of the tutorials. To no avail, I've managed to confuse myself further. If anyone can help that would be greatly appreciated. Here is the mess I made and the result.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>DeCurtis_Canvas</title>
</head>
<body>
</body>
</html>
// Circle //
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3"
fill="red" /
<svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
// Line //
<svg height="210" width="500">
<line xl="0" yl="0" x2="200" y2="200" style="stroke:rgb(255,0,0)"</svg>
// Polygon //
<svg height="210" width="500">
<polygon points="200,10 250,190 160, 210"</svg>
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
//Polyline//
<svg height="180" width="500">
<polyline points="0,40 40, 40 40, 80 80, 80 80, 120 120, 120 120, 160"
style="fill:white;stroke:red;stroke-width:4" />
</svg>
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
/Rectangle/
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
/// Not sure what I got myself into, please help ///
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>DeCurtis_Canvas</title>
</head>
<body>
</body>
</html>
// Circle //
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3"
fill="red" /
<svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
// Line //
<svg height="210" width="500">
<line xl="0" yl="0" x2="200" y2="200" style="stroke:rgb(255,0,0)"</svg>
// Polygon //
<svg height="210" width="500">
<polygon points="200,10 250,190 160, 210"</svg>
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
//Polyline//
<svg height="180" width="500">
<polyline points="0,40 40, 40 40, 80 80, 80 80, 120 120, 120 120, 160"
style="fill:white;stroke:red;stroke-width:4" />
</svg>
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
/Rectangle/
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
/// Not sure what I got myself into, please help ///
Comments
Post a Comment