用canvas畫神盾局Logo

來自專欄前端雜談

照例先看一下效果

文字略顯彆扭，那是因為沒有考慮字元的寬度，在字母I上特別明顯

兩個圓環都不難畫

function drawOuterCircle(){ context.beginPath(); context.lineWidth = 10; context.strokeStyle = "black"; context.fillStyle="white"; context.arc(256, 256, 246, 0, Math.PI * 2); context.stroke(); context.fill();}function drawInnerCircle(){ context.beginPath(); context.fillStyle="black"; context.arc(256, 256, 218, 0, Math.PI * 2); context.fill();}

鷹頭和翅膀都是硬來的

function drawWings(){ context.beginPath(); context.moveTo(256, 337); context.lineTo(435, 137); context.lineTo(440, 145); context.lineTo(402, 195); context.lineTo(471, 254); context.lineTo(472, 261); context.lineTo(399, 199); context.lineTo(364, 242); context.lineTo(455, 337); context.lineTo(453, 344); context.lineTo(360, 248); context.lineTo(328, 289); context.lineTo(417, 400); context.lineTo(387, 427); context.lineTo(301, 304); context.lineTo(256, 352); context.lineTo(215, 304); context.lineTo(134, 432); context.lineTo(103, 406); context.lineTo(190, 290); context.lineTo(155, 249); context.lineTo(63, 350); context.lineTo(60, 343); context.lineTo(150, 243); context.lineTo(114, 201); context.lineTo(41, 265); context.lineTo(42, 258); context.lineTo(110, 197); context.lineTo(70, 147); context.lineTo(75, 140); context.fillStyle = "white"; context.closePath(); context.fill(); }function drawHeader(){ context.beginPath(); context.arc(256, 256, 215, -9* Math.PI/12, -3 * Math.PI/12); context.lineTo(306, 170); context.lineTo(280, 120); context.lineTo(280, 120); context.lineTo(286, 112); context.lineTo(306, 107); context.lineTo(307, 105); context.lineTo(296, 95); context.lineTo(252, 92); context.lineTo(244, 95); context.lineTo(238, 102); context.lineTo(205, 170); context.closePath(); context.fill(); }

文本部分就要用到context的變換了，在繪製文字前需要先對context進行位移和旋轉的變換，變換的前後不能忘記調用save( )和restore( )。這裡並沒有考慮文字的寬度，如果考慮文字的寬度，針對不同的文字，位移的距離也是不一樣的。

function drawCircularText(string, startAngle, endAngle, circle, inverse) { var radius = circle.radius, angleDecrement = (startAngle - endAngle)/(string.length-1), angle = parseFloat(startAngle), index = 0, character; context.save(); context.fillStyle = "black"; context.font = 22 + px Arial; while (index < string.length) { character = string.charAt(index); context.save(); context.beginPath(); context.translate( circle.x + Math.cos(angle) * radius, circle.y - Math.sin(angle) * radius); //不考慮字元寬度，僅僅均分 context.rotate(Math.PI/2 - angle - (inverse?Math.PI: 0)); context.fillText(character, 0, 0); //context.strokeText(character, 0, 0); angle -= angleDecrement; index++; context.restore(); } context.restore(); }

代碼看這裡

swordrain/SHIELD-logo?

github.com
推薦閱讀：