Skip to content

Instantly share code, notes, and snippets.

@rponte

rponte/logo-triadworks-canvas.html

Created October 6, 2015 00:40
Show Gist options
  • Save rponte/45889f743d1adf21d58f to your computer and use it in GitHub Desktop.
Save rponte/45889f743d1adf21d58f to your computer and use it in GitHub Desktop.
Download ZIP
Logo da TriadWorks usando Canvas do HTML5 (by @mariohd)
Raw
logo-triadworks-canvas.html
<html>
<body>
<div style="float: left">
Tamanho: <input type="range" id="size" value="1" max="5" min=".1" step=".1" oninput="updateEscala()"><br>
Aneis: <input class="opcao" type="checkbox" id="aneis" checked="checked"><br>
Background: <input class="opcao" type="checkbox" id="fundo-laranja" checked="checked"><br>
Sombra: <input class="opcao" type="checkbox" id="sombra" checked="checked"><br>
Letras: <input class="opcao" type="checkbox" id="letras" checked="checked"><br>
<div>
<canvas id="meuCanvas" style="float: left"></canvas>
<script>
var canvas = document.getElementById('meuCanvas');
var context = canvas.getContext('2d');
var opcoes = document.querySelectorAll('.opcao');
[].forEach.call(opcoes, function(opt) {
opt.addEventListener('click', function () {
debugger;
context.clearRect(0,0, canvas.width, canvas.height);
desenharLogo();
});
});
var escala = 1;
function updateEscala() {
escala = document.getElementById('size').value;
context.clearRect(0,0, canvas.width, canvas.height);
canvas.width = escala * 300;
canvas.height = escala * 150;
desenharLogo();
}
function desenharLogo() {
if (document.getElementById('aneis').checked) {
context.beginPath();
context.arc(canvas.width/2.01 , canvas.height/2.01 , 60 * escala, 0, Math.PI * 2);
context.lineWidth = 3* escala;
context.strokeStyle="#964A2F";
context.stroke();
context.closePath();
context.beginPath();
var grd = context.createLinearGradient(0, 0, 0, 170);
grd.addColorStop(0, "#DD830E");
grd.addColorStop(1, "#ED9D0C");
context.strokeStyle = grd;
context.lineWidth = 3.5* escala;
context.arc(canvas.width/2.01, canvas.height/2.01, 57* escala, 0, Math.PI * 2);
context.stroke();
context.closePath();
}
if (document.getElementById('fundo-laranja').checked) {
context.beginPath();
context.arc(canvas.width/2.01, canvas.height/2.01, 56* escala, 0, Math.PI * 2);
context.lineWidth = 3;
var grd = context.createLinearGradient(0, 0, 120, canvas.height * 10 * escala);
grd.addColorStop(0, "#EBA561");
grd.addColorStop(1, "#F5B807");
context.fillStyle=grd;
context.fill();
context.closePath();
}
if (document.getElementById('sombra').checked) {
context.beginPath();
context.arc(canvas.width/2.01, canvas.height/2.01, 56 * escala, 180 * Math.PI / 180, 30 * Math.PI / 180, false);
context.lineWidth = 3* escala;
context.fillStyle="rgba(243, 241, 240,.3)";
context.fill();
context.closePath();
}
if (document.getElementById('fundo-laranja').checked) {
context.save();
context.beginPath();
context.moveTo(canvas.width/3.20, canvas.height/2);
context.quadraticCurveTo(canvas.width/2, canvas.height/3.5, canvas.width/2.0 + (48* escala), canvas.height/1.45);
context.lineWidth = 3 * escala;
context.fillStyle="#EBA65D";
context.fill();
context.closePath();
context.restore();
}
if (document.getElementById('letras').checked) {
context.beginPath();
context.lineWidth = 2 * escala;
context.fillStyle="#FDFDFD";
context.strokeStyle="#6C3626 ";
context.moveTo(120 * escala, 50 * escala);
context.lineTo(115 * escala, 65 * escala);
context.lineTo(135 * escala, 65 * escala);
context.lineTo(125 * escala, 100* escala);
context.lineTo(135 * escala, 110* escala);
context.lineTo(150 * escala, 65 * escala);
context.lineTo(165 * escala, 65 * escala);
context.lineTo(170 * escala, 50 * escala);
context.lineTo(119 * escala, 50 * escala);
context.moveTo(139 * escala, 100 * escala);
context.lineTo(150 * escala, 110 * escala);
context.lineTo(170 * escala, 50 * escala);
context.lineTo(155 * escala, 50 * escala);
context.moveTo(165 * escala, 65 * escala);
context.lineTo(180 * escala, 65 * escala);
context.lineTo(165 * escala, 110 * escala);
context.lineTo(154 * escala, 100 * escala);
context.fill();
context.stroke();
context.closePath();
}
}
desenharLogo();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment