Skip to content

Instantly share code, notes, and snippets.

@skawnkk

skawnkk/canvas.html

Last active February 7, 2021 16:14
Show Gist options
  • Save skawnkk/a5a9af0d0cc0bb22b643f97422e8b7a7 to your computer and use it in GitHub Desktop.
Save skawnkk/a5a9af0d0cc0bb22b643f97422e8b7a7 to your computer and use it in GitHub Desktop.
Download ZIP
마지막CS (❁´◡`❁)
Raw
canvas.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<style>
canvas {
width: 600px;
height: 400px;
background-color: greenyellow;
}
</style>
</head>
<body>
<canvas width="1200" height="800"> THIS IS CANVAS </canvas>
<script>
const canvas = document.querySelector("canvas");
if (canvas.getContext) {
console.log("캔버스 지원");
}
function radian(angle) {
return (angle * Math.PI) / 180;
}
const context = canvas.getContext("2d");
let x = 0;
let y = 0;
console.log(canvas.width);
function personDraw() {
y > 0 ? (y = 130) : (y = 0);
context.clearRect(0, 0, canvas.width, canvas.height);
//*Rectangle
context.fillStyle = "rgba(255, 255, 255)";
context.fillRect(200 + x, 450, 200, 150);
//*arc
//시작위치 가로, 세로, 반지름, 시작각도, 끝 각도, 시계(f)/반시계(t)방향
//얼굴
context.fillStyle = "rgba(255, 255, 255)";
context.arc(300 + x, 350, 100, 0, radian(360), false);
context.fill();
//입
context.fillStyle = "rgba(0,0,0)";
context.beginPath();
context.moveTo(350 + x, 350);
context.arc(350 + x, 350, 50, radian(10), radian(50), false);
context.closePath();
context.fill();
//눈
context.beginPath();
context.arc(350 + x, 330, 6, 0, radian(360), false);
context.fill();
//*line
//다리
context.lineWidth = 5;
context.beginPath();
context.moveTo(270 + x, 600);
context.lineTo(200 + x + y, 700); //200 =>330
context.stroke();
context.moveTo(330 + x, 600);
context.lineTo(400 + x - y, 700);
context.stroke();
context.closePath();
//*프레임
context.lineWidth = 20;
context.strokeRect(0, 0, 1200, 800);
//*애니메이션
if (x > 1000) {
context.font = "italic bold 50px Arial, sans-serif";
context.fillText("-THE END-", 500, 400, 500);
} else {
x += 130;
y === 0 ? (y = 130) : (y = 0);
}
}
setInterval(personDraw, 500);
</script>
</body>
</html>
Raw
chart.css
.inner {
margin: 50px;
}
.option input {
margin-left: 15px;
}
form {
margin: 10px;
}
form button {
margin: 5px;
}
canvas {
margin-right: 20px;
background-color: rgba(211, 211, 211, 0.267);
width: 500px;
height: 500px;
}
Raw
chart.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="chart.css" />
</head>
<body>
<div class="inner">
<div class="option">
<input type="file" class ="file" onchange="showFile(this)" />
<form id="choiceGraph">
<div>
<input type = "radio" name = "graph" value="pie">파이 그래프</input>
<input type = "radio" name = "graph" value="bar">막대 그래프</input>
</div>
<div>
<button type ="submit" id="drawChart" disabled="disabled">차트그리기</button>
</div>
</form>
</div>
<div class="canvasArea">
<canvas id ="canvas1" width="1200px" height="1200px">cavas area</canvas>
<canvas id ="canvas2" width="1200px" height="1200px">cavas area</canvas>
</div>
<div>
<script src="chart.js"></script>
</body>
</html>
Raw
chart.js
const submitForm = document.getElementById("choiceGraph");
const drawChartBtn = document.getElementById("drawChart");
const canvas1 = document.getElementById("canvas1");
const canvas2 = document.getElementById("canvas2");
const ctx1 = canvas1.getContext('2d');
const ctx2 = canvas2.getContext('2d');
let dataBase = [];
let item1;
let item2;
let color1 = [
'rgba(138, 92, 114)',
'rgba(231, 178, 191)',
'rgba(124, 225, 189)',
'rgba(239, 229, 82)',
'rgba(194, 176, 187)',
'rgba(188, 222, 142)',
'rgba(245, 238, 226)',
];
//*canvas
function paintPie(k, graphSource) {
let x = 0;
let y = 0;
let ctx;
let item;
if (k === 0) {
ctx = ctx1;
item = item1;
} else {
ctx = ctx2;
item = item2
};
//챠트그리기
for (let i = 0; i < graphSource.length; i++) {
//목록 인덱스
ctx.fillStyle = color1[i];
ctx.beginPath();
ctx.arc(50, 50 + y, 15, 0, 2 * Math.PI, false);
ctx.fill();
//그래프
ctx.moveTo(600, 600);
ctx.arc(600, 600, 400, x, x + graphSource[i][3], false);
ctx.lineTo(600, 600);
ctx.fill();
//글자
ctx.fillStyle = 'rgba(122, 117, 117)';
ctx.font = "25px sans-serif";
ctx.fillText(`${graphSource[i][0]} ${graphSource[i][2]}%`, 80, 55 + y)
ctx.closePath();
y += 35;
x += graphSource[i][3];
}
ctx.font = "bold 40px sans-serif";
ctx.fillText(item, 520, 1150);
}
function pieGraph() {
let k = 0;
while (k < dataBase.length) {
let total = 0;
const sortedObj = Object.fromEntries(
Object.entries(dataBase[k]).sort(([, a], [, b]) => b - a)
);
for (let value of Object.values(sortedObj)) {
total += value;
}
let graphSource = [];
for (let [key, value] of Object.entries(sortedObj)) {
let percentage = (value / total * 100).toFixed(1);
let radianAngle = value / total * 2 * Math.PI;
graphSource.push([key, value, percentage, radianAngle])
}
paintPie(k, graphSource)
k += 1;
}
}
function paintBar(k, graphSource) {
let ctx;
let item;
if (k === 0) {
ctx = ctx1;
item = item1;
} else {
ctx = ctx2;
item = item2
};
let startX = 170;
let endX = 1100;
let startY = 80;
let endY = 1000;
//기본틀_x축
ctx.strokeStyle = 'rgba(122, 117, 117)';
ctx.lineWidth = 0.5;
ctx.beginPath();
ctx.moveTo(startX, endY);
ctx.lineTo(endX, endY);
ctx.stroke();
//기본틀_y축
ctx.moveTo(startX, startY);
ctx.lineTo(startX, endY);
ctx.stroke();
let divide = 6;
let termX = parseInt((endX - startX) / divide); //(X축길이/6등분)
let maxValue = graphSource[0][1];
let numPerX = termX / parseInt(maxValue / divide); //1에 대한 px;
let count = 0;
//X축
for (let i = 1; i < divide; i++) {
//countLine
ctx.lineWidth = 0.3;
ctx.beginPath();
ctx.moveTo(startX + termX * i, startY);
ctx.lineTo(startX + termX * i, endY);
ctx.stroke();
ctx.setLineDash([]);
ctx.closePath();
//countNumber
ctx.moveTo(startX + termX * i, startY + 50);
ctx.font = "30px sans-serif";
ctx.fillStyle = 'rgba(122, 117, 117)';
ctx.fillText(count + parseInt(maxValue / divide), startX + termX * i - 10, endY + 50);
ctx.fill();
count += parseInt(maxValue / divide);
}
//Y축
let termY = parseInt((endY - startY) / (graphSource.length + 1))
for (let i = 0; i < graphSource.length; i++) {
//barGraph
ctx.strokeStyle = 'rgba(124, 225, 189,0.5)';
ctx.lineWidth = 80;
ctx.beginPath();
ctx.moveTo(startX, startY + termY * (i + 1));
ctx.lineTo(startX + graphSource[i][1] * numPerX, startY + termY * (i + 1));
ctx.stroke();
ctx.closePath();
//index
ctx.font = "20px sans-serif";
ctx.textAlign = "right"
ctx.fillStyle = 'rgba(122, 117, 117)';
ctx.fillText(graphSource[i][0], startX - 10, startY + termY * (i + 1))
ctx.fill();
}
//title
ctx.font = "bold 40px sans-serif";
ctx.fillStyle = 'rgba(122, 117, 117)';
ctx.textAlign = "center"
ctx.fillText(item, 600, 1150);
ctx.fill();
}
function barGraph() {
console.log("hi")
let k = 0;
while (k < dataBase.length) {
let total = 0;
const sortedObj = Object.fromEntries(
Object.entries(dataBase[k]).sort(([, a], [, b]) => b - a)
);
let graphSource = Object.entries(sortedObj);
paintBar(k, graphSource);
k++;
}
}
//*btnControl
//그래프유형 선택 버튼
submitForm.addEventListener('submit', function (event) {
event.preventDefault();
var data = new FormData(submitForm);
ctx1.clearRect(0, 0, canvas1.width, canvas1.height);
ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
(data.get('graph') === 'pie') ? pieGraph(): barGraph()
})
//차트버튼 활성화
function btn_on() {
drawChartBtn.disabled = false;
}
function parseData(data) {
let splitedData = data.split("\n").map(el => el.split(",")) //split한것자체가 배열
item1 = splitedData[0][2];
item2 = splitedData[0][3];
//splitedData = splitedData.slice(1, splitedData.length - 1);
splitedData = splitedData.splice(1, splitedData.length - 2);
for (let i = 2; i < splitedData[0].length; i++) {
let dataToObj = splitedData.reduce((acc, curr) => {
(acc.hasOwnProperty(curr[i])) ? acc[curr[i]] += 1: acc[curr[i]] = 1;
return acc;
}, {});
dataBase.push(dataToObj);
}
return dataBase;
}
//*fileOpen
function showFile(input) {
let file = input.files[0];
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function () {
btn_on(); //파일 읽어 온 후 차트 버튼 활성화
parseData(reader.result);
};
reader.onerror = function () {
console.error(reader.error);
};
}
Raw
chart__createCSV.js
//*write CSV file
const title = require('./edit.js')
const createCsvWriter = require('csv-writer').createObjectCsvWriter;
const csvWriter = createCsvWriter({
path: 'out.csv',
header: [{
id: 'name',
title: 'Name'
},
{
id: 'age',
title: 'Age'
},
{
id: 'best_fruit',
title: 'Best fruit'
},
{
id: 'hobby',
title: 'Hobby'
},
]
});
console.log(title.age.length)
function makeData() {
let empty = [];
let number = [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6, 6, 6, 6, ]
for (i = 0; i < title.name.length; i++) {
let data = new Object()
let ran1 = Math.random();
let ran2 = Math.random();
let random1 = number[parseInt(ran1 * number.length)];
let random2 = number[parseInt(ran2 * number.length)];
data.name = title.name[i];
data.age = title.age[i % title.age.length];
data.best_fruit = title.fruits[random1];
data.hobby = title.hobby[random2];
empty.push(data);
}
return empty;
};
const datas = makeData();
csvWriter
.writeRecords(datas)
.then(() => console.log('The CSV file was written successfully'));
Raw
chart__dataSource.js
//*이름추출
let str = 'json https://gist.github.com/kowoohyuk/471fe72163eb4dadfff55ae584dd0173, ray-suh https://gist.github.com/torch-ray/b1a2c6cb7bde3e2873a438eb3afd2f1f, Elly https://gist.github.com/ellyheetov/645a08ca3999ad45107f1cbe61210a66, Kyle https://gist.github.com/hayoung123/e5ecfb8f6e86a5ed614b4d29a43018e8, roach https://gist.github.com/tmdgusya/94d6d93be0c0e0e4fd1c7d26ffe278cb, Lollo https://gist.github.com/eeeesong/9dbfbbadf11427be40ef90c576bbddef, Adela https://gist.github.com/adelakim5/02470b10cf2e25105e5dcad8aee31b3d, Issac(iOS) https://gist.github.com/okstring/5b3a9e7b597110b647c73035807fdf12, swing https://gist.github.com/swing-park/a0d6a18653db48358e254a242782afc6, Seong https://gist.github.com/GleamingStar/5d9f9c92fa398049c420eb7917de3860, JJUNY https://gist.github.com/jjunyjjuny/03a55a87ca572601b1f6b37af78aeda8,Sky(백엔드) https://gist.github.com/aksmf1442/adf18e81bf697aee439bd0c1baa05ce5,Nas(백엔드) https://gist.github.com/Malloc72P/a702a946bb779859390032640d2db631,Rano (FE) https://gist.github.com/17-sss/36dbfb7c2f0224e8d41364181df01e3c,Neis https://gist.github.com/cchoongh/08cc31ad1a6e172e135545beac36f15a,쑤 https://gist.github.com/lenaios/607cb3263ab74bfa69d985c45d294cfe,bitsori(백엔드) https://gist.github.com/keepRainy/be26e0c6e578f87a105f6b02a989db17,Lia https://gist.github.com/Lia316/f7c2bd3ebeb0e7037ccfbe17f14ee64d,Polynomeer https://github.com/Polynomeer/ProblemSolving/tree/main/ByJava/src/leetcode,K (백엔드) https://gist.github.com/PizzaCola-K/d25e2bd1f54df39681e69047b2695fda,Q https://gist.github.com/somedaycode/c9d752f90f02b112f5db872e1d83a28a,Beemo(FE) https://gist.github.com/jeonyeonkyu/f01018dedfc865fa4cf48e886dd78cad,Jenny https://gist.github.com/wjddnjswjd12/3e103609d83508a8abb7c8df3f751387,Junamee https://gist.github.com/skawnkk/02a998dba6c0442a96d5f20717dc13ed,eve712 https://gist.github.com/eve712/90d790a636da17029d24a5ce6a3ca972,MJ https://gist.github.com/MJbae/626c5780d094ff2d6bc5890e3a362219,Dumba[iOS] https://gist.github.com/ghis22130/1e6302fcf321884f2f343afd0951046f,ZG (iOS) https://gist.github.com/jhpark-ZG/8cb8bd86e0f1e981619be09268acadee,coco https://gist.github.com/ChoiGiSung/0a6a9436f46be7053abcdb4b044cb6ec,eamon3481 https://gist.github.com/eamon3481/84d1b31361f24a0c8095a6a50d336e33,Pyro(고정완) https://github.com/backend-squad-2021/TIL/pull/21,Starve https://gist.github.com/Jiwon-JJW/a22ba3685451f490d7c381b7474b1fb5,Dico https://gist.github.com/ha3158987/496a9a98b5752c0a563841c2e57b81f0,Zeke https://gist.github.com/zeke-iOS/71d7a5193895436ce238ef8cbe711587,KimMinSikkk https://gist.github.com/ITzombietux/29f18fa738f3a1718d759d0b84d68a1b,Neo https://gist.github.com/HoonHaChoi/848d6061cc7a1266cf144592852809e8,Sonjh1306 https://gist.github.com/Sonjh1306/963e514b6440617b2d195f9e7cef6e45,min27604 https://gist.github.com/min27604/a136c4880389c0163383a1c5462ec620,아이작(백엔드) https://gist.github.com/isaac56/37cc246f64de4a9a2c0403a64c95d759,TChaper https://gist.github.com/TChaper/45a4cdbf8dce0cf403d32ab06c85aac9,골드 https://gist.github.com/knae11/85c8b5a41d8549f780d7fe68d0079e2d,lisasu(FE) https://gist.github.com/jjabsu/90799374f9ab9d493dd4f826e1921dbb,JiSun Lim https://gist.github.com/janeljs/797c2cfcf47e4462062ee92c3aaba92d,panther222128 https://gist.github.com/panther222128/220dff1c38c7d5fc0011fd3d6ba05437,쏭 https://gist.github.com/1song2/d5840657531b07c5677b880c09595c64,Cooper https://gist.github.com/pbg0205/6e0344214228d3ea7370538e26d07f8c,MyungWanPark https://gist.github.com/MyungWanPark/98b6fc5f10357ce0f1732032850f7a27,Raccoon https://gist.github.com/juddroid/22011a0d5487b1a82f3577b6524c0d64,hiro https://gist.github.com/hiro032/0d3f905d364a1fd2b0adc68dc3ec1f32,V (iOS) https://gist.github.com/zzisun/2df476a275cf15cbdbd0195c80c83f17,Pico https://gist.github.com/miknuhij/4b3bfcc9ea183f69b6d788eb2f7e4199,young(FE) https://gist.github.com/zel0rd/80ac711f2b703d6562a45b8fc3a6e301,bong6981 https://gist.github.com/bong6981/8799b582a5ca3eaeef3100edcea075e7,bat https://gist.github.com/kjk402/def9c70ef41bf6b524c8fec05173426a,Tami https://gist.github.com/ink-0/d601438988366dbd7e4cdd51dcfb1990,noah https://gist.github.com/marintelli/1ef19ddef625f006be74000bf7c8d741,마르코(백엔드) https://gist.github.com/95degree/4dfef8d7fcdb516810d504244adc9e18,bibi https://gist.github.com/bibi6666667/e5abc6d65a9acc0fed9dae09cd5a0d36,Robin https://gist.github.com/malaheaven/4e43e8918edf74faa3264edc05c89b7e,Dong https://gist.github.com/d-h-k/7267f208d818275e7e22ff2ab6d5984e,짹슨 https://gist.github.com/JacksonPk/f70cfc538c8897ef2e3bb392d8b34e6d,dahun-lee-daji https://gist.github.com/dahun-lee-daji/47d313e1b70764cb4e283f86050b321b,Woody https://gist.github.com/jihye-woo/4dc7d494fae6ab40532f4d254ee16726,Autumn https://gist.github.com/dyongdi/f0afa7b3706dbd36db78e8c60421b26d,reminderclock https://gist.github.com/reminderclock/c8ea0e3d16ff5babc0b19610b7c645d3,Shion https://gist.github.com/ehdrhelr/e95b41ca99f0680c0c68f646b9c52344,BMO https://gist.github.com/BMO5/a1de2bf0b6b2c73a03938b55dfaff481,이노 https://gist.github.com/eNoLJ/70452744c7ba0b4d3702b9faee25aca5,HongzCloud https://gist.github.com/HongzCloud/4c8b3b54e6530a239b1285fd8709bbc2,프레디(BE) https://gist.github.com/Dae-Hwa/6e65fe7a674d73893afb095a48a2a289,MagnaPax https://gist.github.com/MagnaPax/2018a987511bb72d537b8358f6428056,Daisy https://gist.github.com/damilog/a9d2551852cae799fcb78c9e77b48ccb,Seohyoung https://gist.github.com/Seohyoung/3740778c76e44483a714df962d5be9f3, yeon(BE) https://gist.github.com/kimnayeon0108/6cd08b5341aeff6c4fd26ead1cc2ea6e, dlsdn1207 https://gist.github.com/dlsdn1207/54a6d875176e6ecb0ae37265248afe9f, goody https://github.com/junzero741/codeSquad/tree/master/algorithm/LC, JEJE https://gist.github.com/JUNGYUN-Daegu/85f1c5898fdaf8737c387a162719c36c, 펭도리 https://gist.github.com/dudn1933/feb7c2f21da1033b2b839f2f2b1a6faf,Kyu (백엔드) https://gist.github.com/kyu-kim-kr/2cd72cb2dbfd76af42c90e82e22f6874, Min(iOS) https://gist.github.com/youngminshim-de/957265d7c33af369dc3110b76cbfb2c9dddddddddddddd'
let list = str.split(",");
let name = list.map(el => el.split("https:")[0].trim());
//*나이
let age = Array.from({
length: 20
}, (v, i) => i + 20)
//*과일
let fruits = ['strawberry', 'watermelon', 'apple', 'cherry', 'grape', 'mango', 'peach'];
//*취미
let hobby = ['coding', 'sleeping', 'watching Netflix', 'eating', 'listening Music', 'playing game', 'drinking']
exports.name = name;
exports.age = age;
exports.fruits = fruits;
exports.hobby = hobby;
Raw
chart__out.csv
Name Age Best fruit Hobby
json 20 strawberry playing game
ray-suh 21 grape coding
Elly 22 strawberry drinking
Kyle 23 peach watching Netflix
roach 24 grape listening Music
Lollo 25 strawberry listening Music
Adela 26 grape drinking
Issac(iOS) 27 strawberry listening Music
swing 28 grape drinking
Seong 29 watermelon listening Music
JJUNY 30 mango drinking
Sky(백엔드) 31 grape listening Music
Nas(백엔드) 32 grape coding
Rano (FE) 33 apple playing game
Neis 34 grape listening Music
쑤 35 grape listening Music
bitsori(백엔드) 36 grape drinking
Lia 37 cherry listening Music
Polynomeer 38 cherry watching Netflix
K (백엔드) 39 grape listening Music
Q 20 grape drinking
Beemo(FE) 21 grape listening Music
Jenny 22 strawberry watching Netflix
Junamee 23 peach listening Music
eve712 24 grape listening Music
MJ 25 apple playing game
Dumba[iOS] 26 strawberry listening Music
ZG (iOS) 27 strawberry listening Music
coco 28 strawberry drinking
eamon3481 29 strawberry sleeping
Pyro(고정완) 30 grape drinking
Starve 31 mango playing game
Dico 32 peach sleeping
Zeke 33 strawberry listening Music
KimMinSikkk 34 apple listening Music
Neo 35 peach coding
Sonjh1306 36 strawberry watching Netflix
min27604 37 strawberry listening Music
아이작(백엔드) 38 strawberry listening Music
TChaper 39 grape coding
골드 20 mango coding
lisasu(FE) 21 strawberry eating
JiSun Lim 22 grape drinking
panther222128 23 peach eating
쏭 24 mango listening Music
Cooper 25 grape coding
MyungWanPark 26 grape playing game
Raccoon 27 strawberry drinking
hiro 28 grape watching Netflix
V (iOS) 29 watermelon listening Music
Pico 30 grape eating
young(FE) 31 grape listening Music
bong6981 32 grape eating
bat 33 peach listening Music
Tami 34 watermelon coding
noah 35 strawberry listening Music
마르코(백엔드) 36 watermelon drinking
bibi 37 grape drinking
Robin 38 watermelon listening Music
Dong 39 strawberry sleeping
짹슨 20 peach drinking
dahun-lee-daji 21 grape listening Music
Woody 22 mango listening Music
Autumn 23 grape sleeping
reminderclock 24 grape eating
Shion 25 mango drinking
BMO 26 grape listening Music
이노 27 strawberry sleeping
HongzCloud 28 grape coding
프레디(BE) 29 cherry drinking
MagnaPax 30 watermelon listening Music
Daisy 31 peach drinking
Seohyoung 32 grape listening Music
yeon(BE) 33 apple eating
dlsdn1207 34 watermelon eating
goody 35 strawberry listening Music
JEJE 36 mango coding
펭도리 37 grape coding
Kyu (백엔드) 38 grape coding
Min(iOS) 39 grape drinking
@juddroid
Copy link

juddroid commented Feb 5, 2021

ㅋㅋㅋㅋㅋㅋㅋ 걸어간다 ㅎㅎㅎㅎㅎㅎㅎㅎ 다시봐도 귀엽네요 진짜 ㅎㅎㅎ

@kowoohyuk
Copy link

미션1 애니메이션 구현을 포기하고 타협했는데 저렇게 구현할 수 있었네요!
차트 배색도 예술적입니다..

@eve712
Copy link

eve712 commented Feb 7, 2021

우와..애니메이션에 차트들까지 진짜 멋져요...👍🏼

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment