HTML5의 캔버스 너비와 높이

181

HTML5 canvas요소 의 너비와 높이를 고정 할 수 있습니까?

일반적인 방법은 다음과 같습니다.

<canvas id="canvas" width="300" height="300"></canvas>

html canvas

— 더스틴
소스

380

canvasDOM 요소는이 .height와 .width받는 속성이 대응을 height="…"하고 width="…"속성. 캔버스 크기를 조정하려면 JavaScript 코드에서 숫자 값으로 설정하십시오. 예를 들면 다음과 같습니다.

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = 800;
canvas.height = 600;

캔버스를 ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height);지우지 만 캔버스를 완전히 지우지 않은 브라우저를 처리 해야합니다 . 크기 변경 후 표시하려는 컨텐츠를 다시 그려야합니다.

높이와 폭을 그리기 위해 사용 된 논리 캔버스 치수이며 것을 더 유의 다른 로부터 style.height및 style.widthCSS 속성. CSS 속성을 설정하지 않으면 캔버스의 고유 크기가 표시 크기로 사용됩니다. CSS 속성을 설정했는데 캔버스 크기와 다른 경우 브라우저에서 컨텐츠의 크기가 조정됩니다. 예를 들면 다음과 같습니다.

// Make a canvas that has a blurry pixelated zoom-in
// with each canvas pixel drawn showing as roughly 2x2 on screen
canvas.width  = 400;
canvas.height = 300; 
canvas.style.width  = '800px';
canvas.style.height = '600px';

4 배 확대 된 캔버스 의이 라이브 예제 를 참조하십시오 .

코드 스 니펫 표시

var c = document.getElementsByTagName('canvas')[0];
var ctx = c.getContext('2d');
ctx.lineWidth   = 1;
ctx.strokeStyle = '#f00';
ctx.fillStyle   = '#eff';

ctx.fillRect(  10.5, 10.5, 20, 20 );
ctx.strokeRect( 10.5, 10.5, 20, 20 );
ctx.fillRect(   40, 10.5, 20, 20 );
ctx.strokeRect( 40, 10.5, 20, 20 );
ctx.fillRect(   70, 10, 20, 20 );
ctx.strokeRect( 70, 10, 20, 20 );

ctx.strokeStyle = '#fff';
ctx.strokeRect( 10.5, 10.5, 20, 20 );
ctx.strokeRect( 40, 10.5, 20, 20 );
ctx.strokeRect( 70, 10, 20, 20 );

body { background:#eee; margin:1em; text-align:center }
canvas { background:#fff; border:1px solid #ccc; width:400px; height:160px }

<canvas width="100" height="40"></canvas>
<p>Showing that re-drawing the same antialiased lines does not obliterate old antialiased lines.</p>

스 니펫 확장

— 프록 츠
소스

1

@Hazaart 다르게 설정 $('#mycanvas').attr({width:400,height:300}).css({width:'800px',height:'600px'});하려면 : 시각적 크기를 픽셀 크기와 동일하게하려면 스타일 만 설정하고 속성 만 설정하지 마십시오.

— Phrogz

1

"시각 크기를 픽셀 크기와 동일하게하려면 스타일을 설정하지 말고 속성 만 설정하십시오."이 환경 설정이 필요한 이유가 있습니까? 캔버스에 많은 객체가 있고 확대 / 축소하려는 경우 CSS를 재설정하는 것이 훨씬 빠릅니다. (모든 객체를 반복하지 않고) ...

— EnglishAdam

3

@Gamemorize : CSS를 통한 줌은 흐릿하게 만듭니다. 그러나 각 객체의 '크기'를 변경하는 대신 컨텍스트 배율 조정 및 다시 그리기 간 변환을 통해 확대 / 축소 할 수 있습니다.

— Phrogz

1

감사합니다. CSS가 무엇을하고 있는지 알 수 있습니다. 캔버스를 이미지처럼 '처리'하고 이미지 크기를 조절하는 것은 '재 그리기'만큼 좋지 않습니다!

— EnglishAdam

3

또한 이제 캔버스에서 'image-rendering : pixelated'스타일을 사용하여 Chrome에서 '흐릿한 픽셀 확대'대신 '맑은 픽셀 확대'를 수행 할 수 있습니다. : 나는 차이를 표시하도록 바이올린 바이올린을 jsfiddle.net/donhatch/9bheb/1663

— 돈 해치

62

캔버스는 2 개의 크기, 캔버스의 픽셀 크기 (backingstore 또는 drawingBuffer)와 표시 크기를 갖습니다. 픽셀 수는 캔버스 속성을 사용하여 설정됩니다. HTML에서

<canvas width="400" height="300"></canvas>

또는 JavaScript

someCanvasElement.width = 400;
someCanvasElement.height = 300;

그것과 별개로 캔버스의 CSS 스타일 너비와 높이

CSS에서

canvas {  /* or some other selector */
   width: 500px;
   height: 400px;
}

또는 JavaScript

canvas.style.width = "500px";
canvas.style.height = "400px";

캔버스를 1x1 픽셀로 만드는 가장 좋은 방법은 항상 CSS 를 사용 하여 크기를 선택한 다음 약간의 JavaScript를 작성하여 픽셀 수가 해당 크기와 일치하도록하는 것입니다.

function resizeCanvasToDisplaySize(canvas) {
   // look up the size the canvas is being displayed
   const width = canvas.clientWidth;
   const height = canvas.clientHeight;

   // If it's resolution does not match change it
   if (canvas.width !== width || canvas.height !== height) {
     canvas.width = width;
     canvas.height = height;
     return true;
   }

   return false;
}

이것이 가장 좋은 방법은 무엇입니까? 대부분의 경우 코드를 변경하지 않고도 작동하기 때문입니다.

전체 창 캔버스는 다음과 같습니다.

코드 스 니펫 표시

const ctx = document.querySelector("#c").getContext("2d");

function render(time) {
  time *= 0.001;
  resizeCanvasToDisplaySize(ctx.canvas);
 
  ctx.fillStyle = "#DDE";
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.save();
 
  const spacing = 64;
  const size = 48;
  const across = ctx.canvas.width / spacing + 1;
  const down = ctx.canvas.height / spacing + 1;
  const s = Math.sin(time);
  const c = Math.cos(time);
  for (let y = 0; y < down; ++y) {
    for (let x = 0; x < across; ++x) {
      ctx.setTransform(c, -s, s, c, x * spacing, y * spacing);
      ctx.strokeRect(-size / 2, -size / 2, size, size);
    }
  }
  
  ctx.restore();
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

function resizeCanvasToDisplaySize(canvas) {
   // look up the size the canvas is being displayed
   const width = canvas.clientWidth;
   const height = canvas.clientHeight;

   // If it's resolution does not match change it
   if (canvas.width !== width || canvas.height !== height) {
     canvas.width = width;
     canvas.height = height;
     return true;
   }

   return false;
}

body { margin: 0; }
canvas { display: block; width: 100vw; height: 100vh; }

<canvas id="c"></canvas>

스 니펫 확장

그리고 여기에 단락의 플로트 캔버스가 있습니다.

코드 스 니펫 표시

const ctx = document.querySelector("#c").getContext("2d");

function render(time) {
  time *= 0.001;
  resizeCanvasToDisplaySize(ctx.canvas);
 
  ctx.fillStyle = "#DDE";
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.save();
 
  const spacing = 64;
  const size = 48;
  const across = ctx.canvas.width  / spacing + 1;
  const down   = ctx.canvas.height / spacing + 1;
  const s = Math.sin(time);
  const c = Math.cos(time);
  for (let y = 0; y <= down; ++y) {
    for (let x = 0; x <= across; ++x) {
      ctx.setTransform(c, -s, s, c, x * spacing, y * spacing);
      ctx.strokeRect(-size / 2, -size / 2, size, size);
    }
  }
  
  ctx.restore();
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

function resizeCanvasToDisplaySize(canvas) {
   // look up the size the canvas is being displayed
   const width = canvas.clientWidth;
   const height = canvas.clientHeight;

   // If it's resolution does not match change it
   if (canvas.width !== width || canvas.height !== height) {
     canvas.width = width;
     canvas.height = height;
     return true;
   }

   return false;
}

span { 
   width: 250px; 
   height: 100px; 
   float: left; 
   padding: 1em 1em 1em 0;
   display: inline-block;
}
canvas {
   width: 100%;
   height: 100%;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus venenatis metus. Mauris ac nibh at odio scelerisque scelerisque. Donec ut enim <span class="diagram"><canvas id="c"></canvas></span>
vel urna gravida imperdiet id ac odio. Aenean congue hendrerit eros id facilisis. In vitae leo ullamcorper, aliquet leo a, vehicula magna. Proin sollicitudin vestibulum aliquet. Sed et varius justo.
<br/><br/>
Quisque tempor metus in porttitor placerat. Nulla vehicula sem nec ipsum commodo, at tincidunt orci porttitor. Duis porttitor egestas dui eu viverra. Sed et ipsum eget odio pharetra semper. Integer tempor orci quam, eget aliquet velit consectetur sit amet. Maecenas maximus placerat arcu in varius. Morbi semper, quam a ullamcorper interdum, augue nisl sagittis urna, sed pharetra lectus ex nec elit. Nullam viverra lacinia tellus, bibendum maximus nisl dictum id. Phasellus mauris quam, rutrum ut congue non, hendrerit sollicitudin urna.
</p>

스 니펫 확장

크기 조정 가능한 제어판의 캔버스는 다음과 같습니다.

코드 스 니펫 표시

const ctx = document.querySelector("#c").getContext("2d");

function render(time) {
  time *= 0.001;
  resizeCanvasToDisplaySize(ctx.canvas);

  ctx.fillStyle = "#DDE";
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.save();
 
  const spacing = 64;
  const size = 48;
  const across = ctx.canvas.width / spacing + 1;
  const down = ctx.canvas.height / spacing + 1;
  const s = Math.sin(time);
  const c = Math.cos(time);
  for (let y = 0; y < down; ++y) {
    for (let x = 0; x < across; ++x) {
      ctx.setTransform(c, -s, s, c, x * spacing, y * spacing);
      ctx.strokeRect(-size / 2, -size / 2, size, size);
    }
  }
  
  ctx.restore();
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

function resizeCanvasToDisplaySize(canvas) {
   // look up the size the canvas is being displayed
   const width = canvas.clientWidth;
   const height = canvas.clientHeight;

   // If it's resolution does not match change it
   if (canvas.width !== width || canvas.height !== height) {
     canvas.width = width;
     canvas.height = height;
     return true;
   }

   return false;
}

// ----- the code above related to the canvas does not change ----
// ---- the code below is related to the slider ----
const $ = document.querySelector.bind(document);
const left = $(".left");
const slider = $(".slider");
let dragging;
let lastX;
let startWidth;

slider.addEventListener('mousedown', e => {
 lastX = e.pageX;
 dragging = true;
});

window.addEventListener('mouseup', e => {
 dragging = false;
});

window.addEventListener('mousemove', e => {
  if (dragging) {
    const deltaX = e.pageX - lastX;
    left.style.width = left.clientWidth + deltaX + "px";
    lastX = e.pageX;
  }
});

body { 
  margin: 0;
}
.frame {
  display: flex;
  align-items: space-between;
  height: 100vh;
}
.left {
  width: 70%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}  
canvas {
  width: 100%;
  height: 100%;
}
pre {
  padding: 1em;
}
.slider {
  width: 10px;
  background: #000;
}
.right {
  flex 1 1 auto;
}

<div class="frame">
  <div class="left">
     <canvas id="c"></canvas>
  </div>
  <div class="slider">
  
  </div>
  <div class="right">
     <pre>
* controls
* go 
* here

&lt;- drag this
     </pre>
  </div>
</div>

스 니펫 확장

여기 배경으로 캔버스가 있습니다

코드 스 니펫 표시

const ctx = document.querySelector("#c").getContext("2d");

function render(time) {
  time *= 0.001;
  resizeCanvasToDisplaySize(ctx.canvas);
 
  ctx.fillStyle = "#DDE";
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.save();
 
  const spacing = 64;
  const size = 48;
  const across = ctx.canvas.width / spacing + 1;
  const down = ctx.canvas.height / spacing + 1;
  const s = Math.sin(time);
  const c = Math.cos(time);
  for (let y = 0; y < down; ++y) {
    for (let x = 0; x < across; ++x) {
      ctx.setTransform(c, -s, s, c, x * spacing, y * spacing);
      ctx.strokeRect(-size / 2, -size / 2, size, size);
    }
  }
  
  ctx.restore();
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

function resizeCanvasToDisplaySize(canvas) {
   // look up the size the canvas is being displayed
   const width = canvas.clientWidth;
   const height = canvas.clientHeight;

   // If it's resolution does not match change it
   if (canvas.width !== width || canvas.height !== height) {
     canvas.width = width;
     canvas.height = height;
     return true;
   }

   return false;
}

body { margin: 0; }
canvas { 
  display: block; 
  width: 100vw; 
  height: 100vh;  
  position: fixed;
}
#content {
  position: absolute;
  margin: 0 1em;
  font-size: xx-large;
  font-family: sans-serif;
  font-weight: bold;
  text-shadow: 2px  2px 0 #FFF, 
              -2px -2px 0 #FFF,
              -2px  2px 0 #FFF,
               2px -2px 0 #FFF;
}

<canvas id="c"></canvas>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus venenatis metus. Mauris ac nibh at odio scelerisque scelerisque. Donec ut enim vel urna gravida imperdiet id ac odio. Aenean congue hendrerit eros id facilisis. In vitae leo ullamcorper, aliquet leo a, vehicula magna. Proin sollicitudin vestibulum aliquet. Sed et varius justo.
</p>
<p>
Quisque tempor metus in porttitor placerat. Nulla vehicula sem nec ipsum commodo, at tincidunt orci porttitor. Duis porttitor egestas dui eu viverra. Sed et ipsum eget odio pharetra semper. Integer tempor orci quam, eget aliquet velit consectetur sit amet. Maecenas maximus placerat arcu in varius. Morbi semper, quam a ullamcorper interdum, augue nisl sagittis urna, sed pharetra lectus ex nec elit. Nullam viverra lacinia tellus, bibendum maximus nisl dictum id. Phasellus mauris quam, rutrum ut congue non, hendrerit sollicitudin urna.
</p>
</div>

스 니펫 확장

속성을 설정하지 않았기 때문에 각 샘플에서 변경된 유일한 것은 CSS입니다 (캔버스에 관한 한)

노트:

캔버스 요소에 테두리 나 패딩을 넣지 마십시오. 요소의 크기에서 빼는 크기를 계산하는 것은 번거 롭습니다.

— gman
소스

가장 좋은 대답은,이 스 니펫은 표준 DOM 캔버스 방법이어야합니다.

— rustypaper

23

대단히 감사합니다! 마지막 으로이 코드로 흐리게 픽셀 문제를 해결했습니다.

<canvas id="graph" width=326 height=240 style='width:326px;height:240px'></canvas>

'반 화소'를 추가하면 선을 흐릿하게 만들 수 있습니다.

— 사용자
소스

26

@UpTheCreek 캔버스에 선을 그리면 흐릿한 것처럼 보일 것입니다. 반 픽셀에 선을 넣으면 (예 : 50 대신 50.5) 멋지고 깔끔한 선이됩니다. 이것은 코드의 맨 처음에 ctx.translate (0.5, 0.5)를 사용하여 수행되므로 나중에 잊어 버릴 수 있습니다.

— Johan

-2

가장 좋은 방법은 :

<canvas id="myChart" style="height: 400px; width: 100px;"></canvas>

— 로한 parab
소스