之前有设计过我们Team的Logo，Cello Studio，于是画了个，纯代码实现0.0
<!--
        Author: SpringHack - springhack@live.cn
        Last modified: 2016-03-29 19:48:55
        Filename: cello.html
        Description: Created by SpringHack using vim automatically.
-->
<!DOCTYPE>
<html xmlns="https://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Canvas Demo By SpringHack</title>
		<style>
			#main {
				width: 500px;
				height: 430px;
				display: none;
				margin: auto;
				transition: all .5s;
			}
			#btn {
				width: 450px;
				font-size: 30px;
				padding: 20px;
				text-align: center;
				color: #34c7c1;
				cursor: pointer;
				border-radius: 10px;
				margin: auto;
				transition: all .5s;
			}
			#btn:hover {
				background-color: #dddddd;
			}
		</style>
	</head>
	<body>
		<div id='btn'>Click me to show Cello Studio</div>
		<canvas id='main' width='500' height='430'></canvas>
		<script>
			(function (window, undefined) {

			 //Event bind while loaded
			 window.onload = function () {
			 	var element = document.getElementById('btn');
				var canvas = document.getElementById('main');
				element.onclick = function () {
					element.style.display = 'none';
					canvas.style.display = 'block';
					draw();
				}
			 }

			 var draw = function () {
			 	//Initiail part
			 	var element = document.getElementById('main');
				var ctx = element.getContext('2d');
				ctx.beginPath();
				ctx.fillStyle = '#dddddd';
				ctx.strokeStyle = '#dddddd';
				ctx.arc(245, 210, 170, 0, Math.PI*2);
				ctx.fill();

				ctx.beginPath();
				ctx.fillStyle = '#ffffff';
				ctx.strokeStyle = '#dddddd';
				ctx.arc(240, 205, 170, 0, Math.PI*2);
				ctx.stroke();
				ctx.fill();


				//Part C
				ctx.beginPath();
				ctx.fillStyle = '#03fa54';
				ctx.strokeStyle = '#03fa54';
				ctx.arc(200, 200, 100, 0, Math.PI*2);
				ctx.fill();

				ctx.beginPath();
				ctx.fillStyle = '#ffffff';
				ctx.strokeStyle = '#ffffff';
				ctx.arc(240, 200, 110, 0, Math.PI*2);
				ctx.fill();


				//Part e
				ctx.beginPath();
				ctx.fillStyle = '#ff6161';
				ctx.strokeStyle = '#ff6161';
				ctx.arc(205, 250, 50, 0, Math.PI*2);
				ctx.fill();

				ctx.beginPath();
				ctx.fillStyle = '#ffffff';
				ctx.fillStyle = '#ffffff';
				ctx.arc(205, 250, 40, 0, Math.PI*2);
				ctx.fill();
				
				ctx.beginPath();
				ctx.fillStyle = '#ff6161';
				ctx.strokeStyle = '#ff6161';
				ctx.rect(165, 245, 80, 10);
				ctx.fill();

				ctx.beginPath();
				ctx.fillStyle = '#ffffff';
				ctx.strokeStyle = '#ffffff';
				ctx.moveTo(245, 255);
				ctx.lineTo(255, 255);
				ctx.lineTo(255, 270);
				ctx.lineTo(205, 255);
				ctx.lineTo(245, 255);
				ctx.fill();


				//Part l
				var x = 240;
				ctx.beginPath();
				ctx.fillStyle = '#fffea8';
				ctx.strokeStyle = '#fffea8';
				ctx.moveTo(500 - x, 100);
				ctx.lineTo(510 - x, 180);
				ctx.lineTo(505 - x, 180);
				ctx.lineTo(505 - x, 300);
				ctx.lineTo(495 - x, 300);
				ctx.lineTo(495 - x, 180);
				ctx.lineTo(490 - x, 180);
				ctx.lineTo(500 - x, 100);
				ctx.fill();

				//Part l
				var x = 225;
				ctx.beginPath();
				ctx.fillStyle = '#8dabff';
				ctx.strokeStyle = '#8dabff';
				ctx.moveTo(500 - x, 100);
				ctx.lineTo(515 - x, 180);
				ctx.lineTo(510 - x, 180);
				ctx.lineTo(510 - x, 300);
				ctx.lineTo(500 - x, 300);
				ctx.lineTo(500 - x, 100);
				ctx.fill();

				//Part o
				var x = 328;
				var y = 250;
				var n = 50;
				var m = 40;
				ctx.beginPath();
				ctx.fillStyle = '#94fffb';
				ctx.strokeStyle = '#94fffb';
				ctx.moveTo(x, y - n);
				ctx.lineTo(x + n*Math.cos(Math.PI/6), y - n*Math.sin(Math.PI/6));
				ctx.lineTo(x + n*Math.cos(Math.PI/6), y + n*Math.sin(Math.PI/6));
				ctx.lineTo(x, y + n);
				ctx.lineTo(x - n*Math.cos(Math.PI/6), y + n*Math.sin(Math.PI/6));
				ctx.lineTo(x - n*Math.cos(Math.PI/6), y - n*Math.sin(Math.PI/6));
				ctx.lineTo(x, y - n);
				ctx.fill();

				ctx.beginPath();
				ctx.fillStyle = '#ffffff';
				ctx.strokeStyle = '#fffff';
				ctx.moveTo(x, y - m);
				ctx.lineTo(x + m*Math.cos(Math.PI/6), y - m*Math.sin(Math.PI/6));
				ctx.lineTo(x + m*Math.cos(Math.PI/6), y + m*Math.sin(Math.PI/6));
				ctx.lineTo(x, y + m);
				ctx.lineTo(x - m*Math.cos(Math.PI/6), y + m*Math.sin(Math.PI/6));
				ctx.lineTo(x - m*Math.cos(Math.PI/6), y - m*Math.sin(Math.PI/6));
				ctx.lineTo(x, y - m);
				ctx.fill();
			}

		 	})(window);
		</script>
	</body>
</html>