캔버스 HTML5 로고 그리기

캔버스 HTML5 로고 그리기

1 개요[ | ]

자바스크립트로 HTML5 캔버스에 HTML5 로고를 그려보자.

2 소스 코드[ | ]

<canvas id='my_canvas' width='140', height='200'></canvas>
<script>
var ctx = document.getElementById('my_canvas').getContext('2d');
 
ctx.fillStyle = '#000000';
ctx.font = "36px 'Arial Black', sans-serif";
ctx.fillText( "HTML", 13, 30);
 
ctx.fillStyle='#e44d26';
ctx.beginPath();
ctx.moveTo(0,40);
ctx.lineTo(12,183);
ctx.lineTo(69,199);
ctx.lineTo(127,183);
ctx.lineTo(139,40);
ctx.closePath();
ctx.fill();	
 
ctx.fillStyle='#f16529';
ctx.beginPath();
ctx.moveTo(69,51);
ctx.lineTo(127,51);
ctx.lineTo(116,174);
ctx.lineTo(69,187);
ctx.closePath();
ctx.fill();	
 
ctx.fillStyle='#ffffff';
ctx.beginPath();
ctx.moveTo(69,69);
ctx.lineTo(113,69);
ctx.lineTo(112,85);
ctx.lineTo(69,85);
ctx.closePath();
ctx.fill();	
 
ctx.fillStyle='#ebebeb';
ctx.beginPath();
ctx.moveTo(69,69);
ctx.lineTo(26,69);
ctx.lineTo(30,121);
ctx.lineTo(69,121);
ctx.lineTo(69,105);
ctx.lineTo(45,105);
ctx.lineTo(44,85);
ctx.lineTo(69,85);
ctx.closePath();
ctx.fill();	
 
ctx.fillStyle='#ffffff';
ctx.beginPath();
ctx.moveTo(69,105);
ctx.lineTo(110,105);
ctx.lineTo(105,158);
ctx.lineTo(69,168);
ctx.lineTo(69,151);
ctx.lineTo(90,146);
ctx.lineTo(92,121);
ctx.lineTo(69,121);
ctx.closePath();
ctx.fill();	
 
ctx.fillStyle='#ebebeb';
ctx.beginPath();
ctx.moveTo(69,151);
ctx.lineTo(69,168)
ctx.lineTo(34,158);
ctx.lineTo(32,132);
ctx.lineTo(48,132);
ctx.lineTo(49,146);
ctx.closePath();
ctx.fill();
</script>

3 같이 보기[ | ]