_로 자릿수를 표현할 수 있다는걸 처음 알았다

 

[링크 : https://cotnmin.dev/4]

[링크 : https://www.javascripttutorial.net/es-next/javascript-numeric-separator/]

Posted by 구차니

웹 테이블을  마우스 드래그로 열 위치 변경하는 스크립트.

 

[링크 : https://phuoc.ng/collection/html-dom/drag-and-drop-table-column/]

'Programming > javascript & HTML' 카테고리의 다른 글

javascript 숫자  (0) 2024.02.07
html video 재생종료 event  (0) 2023.09.02
숫자에 콤마 찍기(자릿수 표현)  (0) 2023.07.27
canvas 없는 getcontext  (0) 2023.07.12
html canvas와 시간 그래프 흘리기  (0) 2023.07.06
Posted by 구차니

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]

 

'Programming > javascript & HTML' 카테고리의 다른 글

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
Posted by 구차니

어떻게 보면 당연한데 얘는 number가 아니라 text 다

그래서 <input type="text"> 로 해주어야 한다.

 

const a = 3540000;
console.log(a.toLocaleString('ko-KR'))  //"3,540,000"

[링크 : https://mong-blog.tistory.com/entry/input에-입력된-숫자에-콤마-찍기]

Posted by 구차니

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
};

[링크 : https://stackoverflow.com/questions/44574228/copying-and-pasting-one-canvas-inside-another-canvass-corner]

Posted by 구차니

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]

'Programming > javascript & HTML' 카테고리의 다른 글

숫자에 콤마 찍기(자릿수 표현)  (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
Posted by 구차니

내부적으로 이렇게 처리할 줄이야..

 

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]

'Programming > javascript & HTML' 카테고리의 다른 글

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
Posted by 구차니

웹 브라우저에서 웹 소켓을 열면 기본값은 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/]

 

'Programming > javascript & HTML' 카테고리의 다른 글

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
Posted by 구차니

'Programming > javascript & HTML' 카테고리의 다른 글

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
Posted by 구차니

배열에서 최소, 최대값 계산하기 함수

 

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]

'Programming > javascript & HTML' 카테고리의 다른 글

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
Posted by 구차니