Chiều rộng và chiều cao canvas trong HTML5

181

Có thể sửa chiều rộng và chiều cao của canvasphần tử HTML5 không?

Cách thông thường là như sau:

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

html canvas

— Bụi
nguồn

380

Phần canvastử DOM có .heightvà .widthcác thuộc tính tương ứng với các thuộc tính height="…"và width="…". Đặt chúng thành các giá trị số trong mã JavaScript để thay đổi kích thước canvas của bạn. Ví dụ:

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

Lưu ý rằng điều này sẽ xóa canvas, mặc dù bạn nên tuân theo ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height);để xử lý các trình duyệt không xóa hoàn toàn canvas. Bạn sẽ cần vẽ lại bất kỳ nội dung nào bạn muốn hiển thị sau khi thay đổi kích thước.

Lưu ý thêm rằng chiều cao và chiều rộng là kích thước vải logic được sử dụng để vẽ và khác với các thuộc tính style.heightvà style.widthCSS. Nếu bạn không đặt các thuộc tính CSS, kích thước nội tại của khung vẽ sẽ được sử dụng làm kích thước hiển thị của nó; nếu bạn đặt các thuộc tính CSS và chúng khác với kích thước canvas, nội dung của bạn sẽ được thu nhỏ trong trình duyệt. Ví dụ:

// 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';

Xem ví dụ trực tiếp này về một khung vẽ được phóng to lên gấp 4 lần.

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

— Phrogz
nguồn

1

@Hazaart Nếu bạn muốn đặt chúng khác nhau: $('#mycanvas').attr({width:400,height:300}).css({width:'800px',height:'600px'});Nếu bạn muốn có kích thước hình ảnh giống với kích thước pixel, không bao giờ đặt kiểu, chỉ có các thuộc tính.

— Phrogz

1

"Nếu bạn muốn có kích thước hình ảnh giống với kích thước pixel, không bao giờ đặt kiểu, chỉ các thuộc tính", có lý do nào cho sở thích này không? Nếu tôi có nhiều đối tượng trong khung vẽ và tôi muốn phóng to / thu nhỏ, sẽ nhanh hơn nhiều nếu chỉ đặt lại css, không? (Thay vì lặp qua tất cả các đối tượng) ...

— EnglishAdam

3

@Gamemorize: phóng to qua CSS làm cho nó mờ đi. Tuy nhiên, bạn có thể phóng to thông qua tỷ lệ ngữ cảnh và dịch giữa vẽ lại thay vì thay đổi 'kích thước' của từng đối tượng.

— Phrogz

1

Thx đánh giá cao. Bây giờ tôi thấy CSS đang làm gì ... nó xử lý canvas 'như' một hình ảnh, thu nhỏ hình ảnh rõ ràng là không tốt bằng 'vẽ lại' nó!

— Tiếng AnhAdam

3

Ngoài ra, giờ đây bạn có thể thực hiện "thu phóng pixel pixel rõ ràng" thay vì "phóng to pixel mờ", ít nhất là trên Chrome, sử dụng kiểu "render-image: pixelated" trên canvas. Tôi đánh lừa câu đố

— Don nở

62

Một khung vẽ có 2 kích thước, kích thước của các pixel trong khung vẽ (đó là kho lưu trữ hoặc vẽBuffer) và kích thước hiển thị. Số lượng pixel được đặt bằng các thuộc tính canvas. Trong HTML

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

Hoặc bằng JavaScript

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

Khác biệt với đó là chiều rộng và chiều cao kiểu CSS của canvas

Trong CSS

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

Hoặc bằng JavaScript

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

Cách tốt nhất để tạo một canvas 1x1 pixel là LUÔN SỬ DỤNG CSS để chọn kích thước sau đó viết một chút JavaScript để làm cho số pixel khớp với kích thước đó.

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

Tại sao đây là cách tốt nhất? Bởi vì nó hoạt động trong hầu hết các trường hợp mà không phải thay đổi bất kỳ mã nào.

Đây là một khung cửa sổ đầy đủ:

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

Và đây là một bức tranh như một hình nổi trong một đoạn văn

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

Đây là một khung vẽ trong bảng điều khiển khá lớn

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

đây là một bức tranh làm nền

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

Bởi vì tôi đã không đặt các thuộc tính, điều duy nhất thay đổi trong mỗi mẫu là CSS (theo như liên quan đến khung vẽ)

Ghi chú:

Không đặt đường viền hoặc phần đệm trên phần tử canvas. Việc tính toán kích thước để trừ đi số lượng kích thước của phần tử là rắc rối

— gman
nguồn

Câu trả lời hay nhất, đoạn mã này phải là một phương thức canvas DOM tiêu chuẩn.

— rustyapers

23

Cảm ơn rât nhiều! Cuối cùng tôi đã giải quyết vấn đề pixel bị mờ với mã này:

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

Với việc bổ sung 'nửa pixel' sẽ tạo ra mẹo để xóa các dòng.

— người dùng1463699
nguồn

26

@UpTheCalet Nếu bạn vẽ một đường thẳng trong khung vẽ, nó trông có vẻ như là ticker, như thể nó bị mờ. Bằng cách đặt các dòng trên một nửa pixel (giả sử, 50,5 thay vì 50), bạn sẽ có được một dòng sạch đẹp. Điều này thường được thực hiện bằng cách sử dụng ctx.translate (0,5, 0,5) ngay từ đầu mã của bạn để bạn có thể quên nó sau đó

— Johan

-2

Cách tốt nhất để làm điều đó:

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

— rohan parab
nguồn