有什么办法可以调整html5 canvas元素的大小吗？

是否有一个原生解决方案在我的HTML5画布的角落提供了一个类似于默认的<textarea>元素的处理。有什么办法可以调整html5 canvas元素的大小吗？

<textarea>resizeable</textarea>

我认为这将清除画布，将需要重绘与canvas.width和canvas.height编程调整画布如果是这种情况。

我环顾四周，什么都没发现，但想在滚动我自己之前检查。如果有人确定没有“简单”的方法，那么这是一个完全可以接受的答案。谢谢！

来源

2016-02-09 thedarklord47

一个快速的想法是将一个空的div放在画布上并将其设置为可调整大小。 Jquery ui可能是另一种选择。 –

啊这是一个好主意，然后只是设置一个监听器调整div的大小 – thedarklord47

@Jan，如果您将此评论置于答案中，我希望接受它。我现在在生产代码中使用div的想法，它一直在努力 – thedarklord47

-1

你会希望把画布变成一个JavaScript Draw（）函数：

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

，并在CSS你的身体元素应该有高度和宽度设置为100％

来源

2016-02-09 20:28:56 Harriet

这大小的窗口大小，并不提供在画布本身的鼠标手柄。请重新阅读这个问题。 – thedarklord47

我能来最好了为使用jQueryUI的可调整像这样

的jsfiddle：https://jsfiddle.net/n24dbaw9/

的Html

<div class="resizable"> 
    <canvas id="myCanvas"></canvas> 
</div>

CSS

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

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

的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” 分区，这是400的默认设置为400的内部。画布的宽度和高度都是100％，所以当用户调整“resizble”div时，画布就会伸展出来。

来源

2016-02-10 00:13:40 Canvas

我宁愿不使用jQueryUI，但感谢一个工作的例子 – thedarklord47

有什么办法可以调整html5 canvas元素的大小吗？

回答

相关问题