Javascript 有没有办法让html5画布元素可以调整大小？

是否有一个本机解决方案在HTML5画布的角落提供了一个类似于默认元素的句柄

---

可调整大小您需要将画布放入JavaScript绘图函数中：

function draw() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
ctx.canvas.width  = window.innerWidth;
ctx.canvas.height = window.innerHeight;
}

---

css中的body元素应该将height和width设置为100%

我能想到的最好方法就是使用jQueryUI来调整大小，就像这样

jsFiddle：

Html

Javascript

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#777";

$(function() {
  $(".resizable").resizable();
});

setInterval(function(){ ctx.fillRect(0, 0, 400, 400); }, 3);

---

基本上，我已经将画布的样式设置为适合resizble div的内部，默认设置为400乘400。画布具有100%宽度和高度的样式，因此当用户调整可调整大小的div时，画布将刚好伸展。

一个简单的方法是在画布顶部放置一个空div，并将其设置为可调整大小。jQueryUI可能是另一种选择。啊，这是一个好主意，然后只需设置一个侦听器来调整div@Jan，如果你在回答中加入这一评论，我愿意接受。我现在在生产代码中使用了div的思想，它在窗口大小之外工作得非常好，并且在画布上没有提供鼠标手柄。请重新阅读问题。我不想使用jQueryUI，但感谢您提供了一个有效的示例

.resizable{
  width: 400px;
  height: 400px;
}

#myCanvas{
  width: 100%;
  height: 100%;
}

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#777";

$(function() {
  $(".resizable").resizable();
});

setInterval(function(){ ctx.fillRect(0, 0, 400, 400); }, 3);