html 캔버스 배경 투명하게 만드는 방법 html canvas background transparent 검색해보다가 찾음 코드펜에서 캔버스로 된 레퍼런스를 찾았는데 캔버스 배경이 검은색이라 배경이미지가 보이지 않았다. 캔버스의 opacity값을 변경하면 검은색과 캔버스의 컨텐츠가 함께 적용됨 난 검은색 배경만 없애고 싶은데 ! ctx.fillStyle = 'rgba(0,0,0,1)'; ctx.fillRect(0, 0, width, height); 스크립트 소스가 위와 같았는데 fillStyle에서 rgba 값을 변경하거나 주석처리하면 캔버스 컨텐츠가 제대로 나오지 않았다. ctx.clearRect(0, 0, width, height); 윗줄은 지우고 아랫줄의 fillRect를 clearRect로 수정했..
mouse cursor custom const cursor = document.getElementById('cursor'); let mouseX = 0; let mouseY = 0; let cursorX = 0; let cursorY = 0; let speed = 0.2; function animate() { let distX = mouseX - cursorX; let distY = mouseY - cursorY; cursorX = cursorX + (distX * speed); cursorY = cursorY + (distY * speed); cursor.style.left = cursorX + 'px'; cursor.style.top = cursorY + 'px'; requestAnimationFra..
// Youtube popup $(".popupModalVideo a").click(function () { $(".video_modal_popup").addClass("reveal"), $(".video_modal_popup .video-wrapper").remove(), $(".video_modal_popup").append(""), $(".close_btn").css('display', 'block') }), $(".video_modal_popup-closer").click(function () { $(".video_modal_popup .video-wrapper").remove(), $(".video_modal_popup").removeClass("reveal"), $(".close_btn").c..
// button 요소를 만들고 btn에 저장 var btn = document.createElement('button'); // Click이라는 텍스트를 만들고 btnText에 저장 var btnText = document.createTextNode('Click'); // btn에 btnText를 삽입 btn.appendChild(btnText); // btn을 body의 자식 요소로 삽입 document.body.appendChild(btn); 참고 https://sh77113.tistory.com/223 [JavaScript ]요소 추가하기 (createElement,TextNode, appendChild) 자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있습니다. 이 때 필요한 자바스크립..
자바스크립트로 막대그래프, 꺾은선 그래프 구현 레퍼런스 1. 막대그래프 https://codepen.io/chlolisher/pen/vYWdbxr Javascript create barGraph ... codepen.io https://lts0606.tistory.com/291 Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 17 : 바 차트 5 이번시간에는 툴팁 효과를 나타내는 기능을 만들어 보겠다. 툴팁은 사실 그리 어려운 기능이 아니다. 여태껏 만들어온 방법과 거의 비슷하게 만들면 된다. 툴팁을 만들 개념을 정리하여보자. 1. lts0606.tistory.com 2. 꺾은선그래프 https://tempdev.tistory.com/15 javascript canvas로 허접한 꺾..
iframe으로 다른 홈페이지를 불러올 때 해당 홈페이지의 컨텐츠 영역만큼 높이값이 조정되지 않고 스크롤이 생겨버리는 현상이 있다. iframe에 불러온 컨텐츠의 높이값을 구해 대입해주면 유동적으로 높이가 조절된다. // iframe으로 불러올 페이지에 추가 // iframe을 삽입한 상위 페이지에 추가 *출처 https://velog.io/@seoyaon/Javascript-%EC%95%84%EC%9D%B4%ED%94%84%EB%A0%88%EC%9E%84iframe-%EB%86%92%EC%9D%B4-%EC%9E%90%EB%8F%99-%EC%A1%B0%EC%A0%88-%ED%95%98%EA%B8%B0feat.-%ED%81%AC%EB%A1%9C%EC%8A%A4-%EB%8F%84%EB%A9%94%EC%9D%B8
% .progress_wrap{ width: 1000px; .percent{ display: inline-block; margin-right: 20px; font-size: 20px; vertical-align: middle; } .progress_bar{ display: inline-block; position: relative; width: 80%; height: 10px; background-color: #ddd; border-radius: 5px; vertical-align: middle; .progress_fill{ position: absolute; height: inherit; border-radius: inherit; background-color: aqua; } } } function p..