나이키 로고(Swoosh) 그리기

Wizrad
Javascript
2020. 3. 14.

유명한 나이키 로고 스우시(Swoosh)를 그려보겠습니다.

인터넷을 뒤져봤지만 Swoosh를 만드는 식은 없는 듯 하여 제가 임의로 만들었습니다. 우측 치수선 2,090 / 2,120 부분은 직선으로 되어 있고 좌측은 직선에 접하는 원으로 시작해 상단 뾰족한 곳까지도 원이 서로 접하도록 되어 있습니다.

왼쪽 맨 하단을 원점(0,0)으로 하고, 오른쪽 하단의 직선을 시작으로 시계방향으로 각각의 식을 보겠습니다.

$y-57=0.44245(x-645)$

$(x-352.7783)^2+(y-717.4584)^2=722^2$

$(x-307.8294)^2+(y-327.876)^2=330^2$ $(x-226.9691)^2+(y-269.6449)^2=230^2$ $(x-433.0722)^2+(y-305.6451)^2=440^2$ $(x-2842.2171)^2+(y+910.3546)^2=2822^2$ $(x-1487.1072)^2+(y-447.6351)^2=1217^2$ $(x-541.1564)^2+(y-669.0274)^2=246^2$ $(x-584.9257)^2+(y-755.2723)^2=342^2$ $y-57=12.26667(x-645)$

오토캐드 쓰시는 분이 계시면 아래 스크립트를 긁어서 command line에 붙여보시기 바랍니다. 로고가 그려지게 됩니다. (command "osmode" 0)(command "line" "2765,995" "645,57" "")(command "arc" "400,995" "e" "55,530" "r" "2822")(command "arc" "55,530" "e" "0,230" "r" "440")(command "arc" "0,230" "e" "40,135" "r" "230")(command "arc" "40,135" "e" "270,0" "r" "330")(command "arc" "270,0" "e" "645,57" "r" "722")(command "line" "2765,995" "675,425" "")(command "arc" "400,995" "e" "302,725" "r" "1217")(command "arc" "302,725" "e" "430,450" "r" "246")(command "arc" "430,450" "e" "675,425" "r" "342")(command "osmode" 1)

자바스크립트 canvas로도 그려보았습니다.

소스입니다.

<script language="javascript">
 
function gclaer() {
        resetbtn = document.getElementById('gclear');
        document.getElementById("canvas");
        context = canvas.getContext("2d").clearRect(0,0, canvas.width, canvas.height);
        document.getElementById('graph').disabled=false;
}
function draw(){
    graphbtn = document.getElementById('graph');
    graphbtn.disabled = 'disabled';
    
    var canvas ; 
    var context ;
 
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
 
    context.beginPath();
    context.arc(45.278,37.754,72.222,(Math.PI/180)*66.133,(Math.PI/180)*96.582,false);
    context.arc(40.783,76.712,33.005,(Math.PI/180)*96.582,(Math.PI/180)*144.241,false);
    context.arc(32.697,82.536,23.041,(Math.PI/180)*144.241,(Math.PI/180)*170.092,false);
    context.arc(53.307,78.935,43.963,(Math.PI/180)*170.092,(Math.PI/180)*210.686,false);
    context.arc(258.222,200.535,282.241,(Math.PI/180)*210.686,(Math.PI/180)*222.460,false);
    context.arc(158.711,64.736,121.713,(Math.PI/180)*206.726,(Math.PI/180)*193.173,true);
    context.arc(64.116,42.597,24.562,(Math.PI/180)*193.173,(Math.PI/180)*116.908,true);
    context.arc(68.493,33.973,34.233,(Math.PI/180)*116.908,(Math.PI/180)*74.745,true);
    context.lineTo(286.5,10);
    context.lineTo(286.5,10);
    context.closePath();
    context.fill();    
}
</script>  
<form name="sumform">
<input id="graph" value="graph" onclick="draw()" type="button"/>
<input id="gclear" type="button" value="clear" onclick="gclaer()"/><br>
<style>
    canvas {border:1px solid black;}
</style>
 
<body>
    <canvas id="canvas" height="120" width="300"></canvas>
</body>
 
 
Colored by Color Scripter

cs

저작자표시

'Javascript' 카테고리의 다른 글

자바스크립트 선형대수(Linear Algebra) 행렬계산 (0)	2020.03.13
자바스크립트] Canvas Line 그리기 (1)	2020.03.12
자바스크립트 Chart.JS 바로 전 그래프 데이터 없애기 (0)	2020.03.11
자바스크립트를 이용한 x,y 좌표그래프 그리기 [x,y graph drawing using javascript] (0)	2020.03.11
로또번호 생성(자바스크립트) (8)	2020.03.08

Kkaesaem 깨샘