如何使用JavaScript调整画布大小？

问题描述

如何使JavaScript画布（或称为400px x 400px的绘图区域）大于400x400？

How would one make the JavaScript canvas (or whatever the 400px by 400px drawing area is called) larger than 400x400?

我有一个1440p的屏幕，当我通过HTML文件运行JS文件时，画布在左上角的像素不足400px x 400px。

I have a 1440p screen and when I run my JS files through an HTML file, the canvas is not surprisingly a small 400px by 400px box in the top left.

有什么办法可以将画布扩展到指定的高度和宽度吗？

Is there anything I can do to expand the canvas to a specified height and width?

推荐答案

以下jsfiddle演示了如何调整画布大小。

The following jsfiddle demonstrates how to resize the canvas. https://jsfiddle.net/intrinsica/msj0cwx3/

(function() {
  var canvas = document.getElementById('canvas'),
      context = canvas.getContext('2d');

  // Event handler to resize the canvas when the document view is changed
  window.addEventListener('resize', resizeCanvas, false);

  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Redraw everything after resizing the window
    drawStuff();
  }
  resizeCanvas();

  function drawStuff() {
    // Do drawing here
    context.strokeRect(10,10, 230,100);
    context.font = '16px serif';
    context.fillText('The canvas is the blue', 30, 30);
    context.fillText('background color seen here.', 30, 50);
    context.fillText('It will resize if the window', 30, 70);
    context.fillText('size is adjusted.', 30, 90);
  }
})();

* { margin:0; padding:0; } /* to remove the top and left whitespace */

html, body { width:100%; height:100%; } /* just to be sure these are full screen*/

canvas {
    background: #77f;  /* to show the canvas bounds */
    display:block;     /* to remove the scrollbars */
}

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

这篇关于如何使用JavaScript调整画布大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！