Question

是否有本机解决方案在HTML5画布的角落提供类似于默认<textarea>元素的句柄。

＆＃13;

<textarea>resizeable</textarea>

＆＃13;

我认为这将清除画布，并且需要重绘，因为在使用canvas.width和canvas.height以编程方式调整画布大小时就是这种情况。

我环顾四周，什么也没找到，但是想在自己开车之前检查一下。如果有人确定没有＆＃34; easy＆＃34;那么这是一个完全可以接受的答案。谢谢！

Answer 1

我能想到的最好的就是像这样使用jQueryUI Resizable

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);

基本上我已将帆布设计成适合＆＃34; resizble＆＃34; div，默认设置为400乘以400。画布具有100％宽度和高度的样式，因此当用户调整＆＃34; resizble＆＃34;然后画布将延伸出来。

Answer 2

您需要将画布放入JavaScript draw（）函数：

TransformerHelper transformerHelper = new TransformerHelper();
Result result = new StringResult();
SoapMessage soapMessage = ((SoapMessage) messageContext.getResponse());
Source source = soapMessage.getEnvelope().getSource();
transformerHelper.transform(source, result);
String responseXml = result.toString();

并且css中的body元素的高度和宽度应设置为100％

有没有办法让html5 canvas元素可以调整大小？

2 个答案: