JavaScript

【问题标题】：JavaScript - Can't resize the canvas [duplicate]JavaScript - 无法调整画布大小[重复]
【发布时间】：2018-04-12 09:48:57
【问题描述】：

我正在使用 javascript 和一些 jQuery 制作一个绘画应用程序。

我正在尝试在 javascript 中调整画布的大小，但画布没有调整大小... 我想让画布适合用户的屏幕+在工具栏的顶部留出空间。如果有帮助，这里是整个代码的一支笔：https://codepen.io/mistahdukk/pen/dmaKOV

标记

<div id="canvas">
        <canvas class="drawing-canvas"></canvas>
</div>

var width = window.innerWidth,
    height = window.innerHeight;

canvas.width = width;
canvas.height= height;

在

【问题讨论】：

您需要使用ctx.canvas 属性或canvas[0] 而不是canvas jQuery 对象。

标签： javascript jquery html css canvas

【解决方案1】：

把javascript改成

canvas[0].width = width;
canvas[0].height= height;

更新代码笔：https://codepen.io/anon/pen/LdvdBB

【讨论】：

【解决方案2】：

这似乎对我有用。

var width = window.innerWidth,
    height = window.innerHeight;
    
    
    canvas = $("#canvas");
    document.getElementById("canvas").onclick = function(){
    console.log(width);
   document.getElementById("drawing-canvas").width = width;
   }

#canvas{
  float: left;
  background-color: red;
  left: 0;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvas">
        <canvas class="drawing-canvas" id="drawing-canvas"></canvas>
</div>

【讨论】：