首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用JavaScript调整画布的大小?

如何使用JavaScript调整画布的大小?
EN

Stack Overflow用户
提问于 2016-09-19 05:53:41
回答 4查看 28.7K关注 0票数 5

如何使JavaScript画布(或者400px x 400px的绘图区域被称为)大于400x400?

我有一个1440p的屏幕,当我通过HTML文件运行我的JS文件时,画布在左上角是一个400px乘400px的小方框,这并不奇怪。

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

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2016-09-19 06:09:48

下面的jsfiddle演示了如何调整画布的大小。https://jsfiddle.net/intrinsica/msj0cwx3/

代码语言:javascript
复制
(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);
  }
})();
代码语言:javascript
复制
* { 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 */
}
代码语言:javascript
复制
<canvas id="canvas"></canvas>

票数 13
EN

Stack Overflow用户

发布于 2016-09-19 06:10:53

您是否通过HTML声明了一个画布?如果是这样的话,您可以使用:

代码语言:javascript
复制
<canvas id="myCanvas" width="1400" height="900"></canvas>

如果要通过Javascript更改大小,可以使用:

代码语言:javascript
复制
<script type="text/javascript">
    document.getElementById('myCanvas').height = 800;
    document.getElementById('myCanvas').width = window.innerWidth;
</script>
票数 1
EN

Stack Overflow用户

发布于 2016-09-19 06:15:22

因为javascript可能会忽略CSS尝试在Javascript & CSS中设置画布的宽度和高度,例如,我希望我的画布的宽度为650px,高度为750px (如果您的id被称为canvas ),并在canvas标记中添加width和height

代码语言:javascript
复制
canvas.width = 650px;
canvas.height = 750px;
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39563033

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档