웹 테이블을 마우스 드래그로 열 위치 변경하는 스크립트.
[링크 : https://phuoc.ng/collection/html-dom/drag-and-drop-table-column/]
| javascript groupby map (0) | 2024.03.12 |
|---|---|
| javascript 숫자 (0) | 2024.02.07 |
| html video 재생종료 event (0) | 2023.09.02 |
| 숫자에 콤마 찍기(자릿수 표현) (0) | 2023.07.27 |
| canvas 없는 getcontext (0) | 2023.07.12 |
video 태그에서 비디오 재생 종료시, onended 이벤트가 발생한다고 한다.
대충(?) 이걸 이용해서 video tag에 재생목록 기능이 없으니, 순차적으로 다른 파일을 재생은 가능한 듯.
| let aud = document.getElementById("myAudio"); aud.onended = function() { alert("The audio has ended"); }; |
[링크 : https://www.w3schools.com/tags/av_event_ended.asp]
[링크 : https://www.w3schools.com/tags/ref_av_dom.asp]
| javascript 숫자 (0) | 2024.02.07 |
|---|---|
| 마우스로 테이블 열 변경하기 (0) | 2024.02.02 |
| 숫자에 콤마 찍기(자릿수 표현) (0) | 2023.07.27 |
| canvas 없는 getcontext (0) | 2023.07.12 |
| html canvas와 시간 그래프 흘리기 (0) | 2023.07.06 |
어떻게 보면 당연한데 얘는 number가 아니라 text 다
그래서 <input type="text"> 로 해주어야 한다.
| const a = 3540000; console.log(a.toLocaleString('ko-KR')) //"3,540,000" |
[링크 : https://mong-blog.tistory.com/entry/input에-입력된-숫자에-콤마-찍기]
| 마우스로 테이블 열 변경하기 (0) | 2024.02.02 |
|---|---|
| html video 재생종료 event (0) | 2023.09.02 |
| canvas 없는 getcontext (0) | 2023.07.12 |
| html canvas와 시간 그래프 흘리기 (0) | 2023.07.06 |
| javascript 정수는 정수가 아니다 (0) | 2023.04.06 |
document 객체를 이용해서 element를 생성만 하고 추가하지 않으면 되는건가?
| // Create a canvas element var canvas = document.createElement('canvas'); canvas.width = 500; canvas.height = 400; // Get the drawing context var ctx = canvas.getContext('2d'); // Then you can do stuff, e.g.: ctx.fillStyle = '#f00'; ctx.fillRect(20,10,80,50); |
| var offscreen = new OffscreenCanvas(256, 256); |
[링크 : https://stackoverflow.com/questions/3892010/create-2d-context-without-canvas]
크롬에서 확인해보니 먼가 되는것 같긴 하다?
버전 114.0.5735.198(공식 빌드) (64비트)
| var offscreen = new OffscreenCanvas(256, 256); undefined ctx = offscreen.getContext("2d") OffscreenCanvasRenderingContext2D {canvas: OffscreenCanvas, globalAlpha: 1, globalCompositeOperation: 'source-over', filter: 'none', imageSmoothingEnabled: true, …} |
+
OffscreenCanvas() 에는 toDataURL()이 없나보다.
+
getContext("2d").canvas 로 하면 굳이 복잡하게 하지 않아도 바로 imf로 떨어지는 듯.
| var first = document.getElementById('first').getContext('2d'); var sec = document.getElementById('second').getContext('2d'); // draw on first canvas first.fillStyle = '#07C'; first.fillRect(0, 0, first.canvas.width, first.canvas.height); // draw image on second canvas var img = new Image(); img.src = "http://lorempixel.com/300/300"; img.onload = function() { sec.drawImage(img, 0, 0, sec.canvas.width, sec.canvas.height); sec.drawImage(first.canvas, 100, 100, 100, 100); // draw first canvas on a portion of second canvas }; |
| html video 재생종료 event (0) | 2023.09.02 |
|---|---|
| 숫자에 콤마 찍기(자릿수 표현) (0) | 2023.07.27 |
| html canvas와 시간 그래프 흘리기 (0) | 2023.07.06 |
| javascript 정수는 정수가 아니다 (0) | 2023.04.06 |
| websocket binarytype (0) | 2023.04.04 |
canvas에 먼가 그려져 있어야 테스트를 하니 일단 줄을 그리고
| const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); // Start a new Path ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(300, 150); // Draw the Path ctx.stroke(); |
[링크 : https://www.w3schools.com/jsref/canvas_lineto.asp]
여기서 나오는 waterfall display를 canvas로 간단하게 그려보려고 하니
[링크 : https://www.arc.id.au/Spectrogram.html]
간간히 아래와 같은 경고? 에러가 나지만 일단 무시하고 실행은 가능하니 나중에 찾아봐야 할 듯.
| tt.html:27 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently |
[링크 : https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently]
getImageData를 이용하여 좌상단으로 부터 가장 아래 1줄 빼고 복사하고
putImageData를 이용하여 복사한 그림을 위에 1줄 비우고 붙여넣는다.
결과적으로 가장 왼쪽 위 1픽셀은 남은채 나머지는 아래로 흘러내리는 애니메이션 완성!
| <!DOCTYPE html> <html> <head> </head> <body> <canvas id="sepctrograph" height=500 width=1800></canvas> <script> function init_canvas() { canvas = document.getElementById("sepctrograph") ctx = canvas.getContext("2d"); // Start a new Path ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(300, 150); // Draw the Path ctx.stroke(); } function flow_canvas() { console.log("ing"); canvas = document.getElementById("sepctrograph") ctx = canvas.getContext("2d"); imgObj = ctx.getImageData(0,0, canvas.width, canvas.height - 1); ctx.putImageData(imgObj, 0, 1); // next line draw } init_canvas(); setInterval(flow_canvas, 1000); </script> </body> </html> |
+
새로 생성하지 않고 getImageData로 받은건 이상하게 편집이 안되는 느낌이라..
그냥 높이 1짜리로 새롭게 만들어서, 가장 위에 한줄 넣는게 무난한 듯.
| const myImageData = ctx.createImageData(width, height); |
[링크 : https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas]
| 숫자에 콤마 찍기(자릿수 표현) (0) | 2023.07.27 |
|---|---|
| canvas 없는 getcontext (0) | 2023.07.12 |
| javascript 정수는 정수가 아니다 (0) | 2023.04.06 |
| websocket binarytype (0) | 2023.04.04 |
| 자바스크립트 소수점 자르기 (0) | 2023.03.13 |
내부적으로 이렇게 처리할 줄이야..
| A number literal like 37 in JavaScript code is a floating-point value, not an integer. There is no separate integer type in common everyday use. (JavaScript also has a BigInt type, but it's not designed to replace Number for everyday uses. 37 is still a number, not a BigInt.) |
[링크 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number]
| canvas 없는 getcontext (0) | 2023.07.12 |
|---|---|
| html canvas와 시간 그래프 흘리기 (0) | 2023.07.06 |
| websocket binarytype (0) | 2023.04.04 |
| 자바스크립트 소수점 자르기 (0) | 2023.03.13 |
| Math.min.apply() (0) | 2023.02.07 |
웹 브라우저에서 웹 소켓을 열면 기본값은 blob 으로 열리는데
| Value A string: "blob" Use Blob objects for binary data. This is the default value. "arraybuffer" Use ArrayBuffer objects for binary data. |
binaryType을 지정하면 blob이 아닌 arraybuffer로 열 수 있다.
| // Create WebSocket connection. const socket = new WebSocket("ws://localhost:8080"); // Change binary type from "blob" to "arraybuffer" socket.binaryType = "arraybuffer"; |
[링크 : https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/binaryType]
웹 소켓에서 blob이나 arraybuffer로 받는데
blob은 slice를 통해 자를수 있긴 한데 이래저래 행렬 처리가 아니다 보니 번거롭고
개인적인 취향으로는 blob을 받아서 arraybuffer로 변환하기 보다는 arraybuffer로 받아서 적당히 잘라쓰는 쪽 일 듯
blob은 contentType을 멀 지정해야 하나 조금 귀찮은 듯.. (타입이다 보니 int32, float64 이런게 아닐 것 같으니)
| Syntax slice() slice(start) slice(start, end) slice(start, end, contentType) |
[링크 : https://developer.mozilla.org/en-US/docs/Web/API/Blob/slice]
| Convert an ArrayBuffer or typed array to a Blob # var array = new Uint8Array([0x04, 0x06, 0x07, 0x08]); var blob = new Blob([array]); |
[링크 : https://riptutorial.com/javascript/example/1390/converting-between-blobs-and-arraybuffers]
[링크 : https://velog.io/@chltjdrhd777/ArrayBuffer-와-Blob]
[링크 : https://heropy.blog/2019/02/28/blob/]
| strToAB = str => new Uint8Array(str.split('') .map(c => c.charCodeAt(0))).buffer; ABToStr = ab => new Uint8Array(ab).reduce((p, c) => p + String.fromCharCode(c), ''); console.log(ABToStr(strToAB('hello world!'))); |
[링크 : https://stackoverflow.com/questions/39725716/]
[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Int32Array]
[링크 : http://mohwa.github.io/blog/javascript/2015/08/31/binary-inJS/]
| html canvas와 시간 그래프 흘리기 (0) | 2023.07.06 |
|---|---|
| javascript 정수는 정수가 아니다 (0) | 2023.04.06 |
| 자바스크립트 소수점 자르기 (0) | 2023.03.13 |
| Math.min.apply() (0) | 2023.02.07 |
| web 렌더러 벤치마크 (0) | 2022.12.22 |
이런 쉬운 함수가 있다니! 만세!
| numObj.toFixed([digits]) |
[링크 : https://squll1.tistory.com/entry/javascript-소수점-자리수-지정자르기]
[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed]
| javascript 정수는 정수가 아니다 (0) | 2023.04.06 |
|---|---|
| websocket binarytype (0) | 2023.04.04 |
| Math.min.apply() (0) | 2023.02.07 |
| web 렌더러 벤치마크 (0) | 2022.12.22 |
| 웹에서 f5 갱신 막기 (0) | 2019.06.04 |
배열에서 최소, 최대값 계산하기 함수
| Math.min.apply(null, arr) Math.max.apply(null, arr) |
[링크 : https://rutgo-letsgo.tistory.com/96]
| Syntax apply(thisArg, argsArray) Parameters thisArg The value of this provided for the call to func. If the function is not in strict mode, null and undefined will be replaced with the global object, and primitive values will be converted to objects. argsArray Optional An array-like object, specifying the arguments with which func should be called, or null or undefined if no arguments should be provided to the function. |
[링크 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply]
| websocket binarytype (0) | 2023.04.04 |
|---|---|
| 자바스크립트 소수점 자르기 (0) | 2023.03.13 |
| web 렌더러 벤치마크 (0) | 2022.12.22 |
| 웹에서 f5 갱신 막기 (0) | 2019.06.04 |
| cose network graph (0) | 2019.06.03 |
현재 사용중인 컴퓨터(i5-10210U) 에서 해보니
2000개(기본값 기준)
27~32 fps svg
42~48 fps canvas
60~61 fps webgl(아마도.. 측정불가?)
10000개
6~7 fps svg
11~12 fps canvas
60~61 fps webgl(아마도.. 측정불가?)
[링크 : https://ahoak.github.io/renderer-benchmark/]
[링크 : https://github.com/ahoak/renderer-benchmark]
최적화 방법에 따라 달라지지만
SVG < canvas < webGL 순서로 성능이 올라가는 듯.
[링크 : https://www.yworks.com/blog/svg-canvas-webgl]
[링크 : https://blog.scottlogic.com/2020/05/01/rendering-one-million-points-with-d3.html]
| 자바스크립트 소수점 자르기 (0) | 2023.03.13 |
|---|---|
| Math.min.apply() (0) | 2023.02.07 |
| 웹에서 f5 갱신 막기 (0) | 2019.06.04 |
| cose network graph (0) | 2019.06.03 |
| HTTP 302 redirect (0) | 2019.04.26 |
|
