Canvas 각서

7056 단어 HTML5자바스크립트캔버스
Canvas를 사용하려고 할 때 매번 헤매는 것, 몇 번 조사해도 기억할 수 없다는 것을 기재해 둡니다. 아래의 모든 검증은 Chrome 68에서 수행됩니다.

크기 변경



Canvas의 초기 값


<canvas></canvas>

를 지정하면 캠퍼스의 초기 값은 300pxx150px입니다.
<style type="text/css">
        #view_1 {background-color:#ff0000}
</style>

<canvas id="view_1"></canvas><br>
<script>
var cv=document.getElementById('view_1');
var ctx = cv.getContext('2d');
ctx.strokeRect(0, 0, 100, 100);
ctx.strokeRect(100, 100, 100, 100);
console.log(ctx.canvas.width)
console.log(ctx.canvas.height);
console.log(ctx.canvas.clientWidth);
console.log(ctx.canvas.clientHeight);
</script>

이 프로그램이 작동하면 디스플레이는 다음과 같이 보입니다.


width = 300
height = 150
clientWidth = 300
clientHeight = 150
됩니다.

canvas 태그로 width 지정


<canvas width="600"></canvas>

라고 지정하면, 해석은 그대로 canvas 를 펼칠 수가 있습니다.
<style type="text/css">
        #view_2 {background-color:#00ff00}
</style>

<canvas id="view_2" width="600"></canvas><br>
<script>
var cv2=document.getElementById('view_2');
var ctx2 = cv2.getContext('2d');
ctx2.strokeRect(0, 0, 100, 100);
ctx2.strokeRect(100, 100, 100, 100);
console.log(ctx2.canvas.width)
console.log(ctx2.canvas.height);
console.log(ctx2.canvas.clientWidth);
console.log(ctx2.canvas.clientHeight);
</script>

이 프로그램이 작동하면 디스플레이는 다음과 같이 보입니다.

width = 600
height = 150
clientWidth = 300
clientHeight = 150

됩니다.

CSS에서 width 지정


<style type="text/css">
        #view_3 {background-color:#0000ff; width:600;}
</style>

CSS 에 width 를 기술하면, 초기치의 폭이 기재된 값이 되도록(듯이) 전체로 확대됩니다.
<style type="text/css">
        #view_3 {background-color:#0000ff; width:600;}
</style>

<canvas id="view_3"></canvas><br>
<script>
var cv3=document.getElementById('view_3');
var ctx3 = cv3.getContext('2d');
ctx3.strokeRect(0, 0, 100, 100);
ctx3.strokeRect(100, 100, 100, 100);
console.log(ctx3.canvas.width)
console.log(ctx3.canvas.height);
console.log(ctx3.canvas.clientWidth);
console.log(ctx3.canvas.clientHeight);
</script>

이 프로그램이 작동하면 디스플레이는 다음과 같이 보입니다.

width = 300
height = 150
clientWidth = 600
clientHeight = 300

됩니다.

위치 맞추기



absolute에서 Top, Left 설정


<style type="text/css">
    #view_1 {
        background-color:#ff0000;
        position:absolute;
        top: 50px;
        left: 50px;
    }

    #view_2 {
        background-color:#00ff00;
        position:absolute;
        top: 150px;
        left: 150px;
    }
</style>

<canvas id="view_1"></canvas>
<canvas id="view_2"></canvas>
<script>
var cv1=document.getElementById('view_1');
var ctx1 = cv1.getContext('2d');
ctx1.strokeRect(0, 0, 100, 100);
ctx1.strokeRect(100, 100, 100, 100);
console.log(ctx1.canvas.offsetTop);
console.log(ctx1.canvas.offsetLeft);

var cv2=document.getElementById('view_2');
var ctx2 = cv2.getContext('2d');
ctx2.strokeRect(0, 0, 100, 100);
ctx2.strokeRect(100, 100, 100, 100);
console.log(ctx2.canvas.offsetTop);
console.log(ctx2.canvas.offsetLeft);
</script>

이 프로그램이 작동하면 디스플레이는 다음과 같이 보입니다.


view_1 의 top, left 는
offsetTop = 50
offsetLeft = 50

view_2의 top, left는
offsetTop = 150
offsetLeft = 150
됩니다.
<body style="margin-right:28px;margin-left:28px;margin-top:20px;">

absolute 의 설정에서는,body 안에서 마진을 설정해도 위치 ( offsetTop, offsetLeft ) 는 같은 값입니다.

relative에서 Top, Left 설정



relative는 조금 번거로움.
<body>
<style type="text/css">
    #view_1 {
        background-color:#ff0000;
        position:relative;
        top: 0px;
        left: 0px;
    }

    #view_2 {
        background-color:#00ff00;
        position:absolute;
        top: 0px;
        left: 0px;
    }
</style>

<canvas id="view_1"></canvas>
<canvas id="view_2"></canvas>
～以下略～
</body>



view_1 의 top, left 는
offsetTop = 8
offsetLeft = 8

view_2의 top, left는
offsetTop = 8
offsetLeft = 313

됩니다. view_1의 마진은 Top도 Left도 8, view_2의 Left는 view_1의 우단으로부터 +5의 위치에 배치됩니다. Chrome이 마음대로 배치한 것 같습니다. FireFox도 동일했습니다.

이 초기값, +8 과 +313 가 이하와 같은 경우에도 더해집니다.
<body>
<style type="text/css">
    #view_1 {
        background-color:#ff0000;
        position:relative;
        top: 50px;
        left: 50px;
    }

    #view_2 {
        background-color:#00ff00;
        position:relative;
        top: 150px;
        left: 150px;
    }
</style>

<canvas id="view_1"></canvas>
<canvas id="view_2"></canvas>

view_1 의 top, left 는
offsetTop = 58
offsetLeft = 58

view_2의 top, left는
offsetTop = 158
offsetLeft = 463 ( 313+150 =463 )

됩니다.

static의 경우



position 가 static 의 경우, top, left 의 설정은 무시됩니다.
태그가 있는 위치에 따라 다릅니다.
이 있으면 Top 값이 커집니다.
<body>
<style type="text/css">
    #view_1 {
        background-color:#ff0000;
        position:static;
        top: 50px;
        left: 50px;
    }

    #view_2 {
        background-color:#00ff00;
        position:static;
        top: 150px;
        left: 150px;
    }
</style>
<br><br>
<canvas id="view_1"></canvas>
<canvas id="view_2"></canvas>



이 두 개 들어 있다면

view_1 의 top, left 는
offsetTop = 56
offsetLeft = 8

view_2의 top, left는
offsetTop = 56
offsetLeft = 313

되었습니다.
Mapbox GL JS에서 오른쪽 하단 위도 경도 얻기
leaflet를 단련한다. 그 3

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage