之前有设计过我们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>