相关疑难解决方法(0)

我在html中静态定义了一个宽度和高度的canvas元素.如果我尝试使用JavaScript动态调整大小(设置新的宽度和高度 - 无论是在画布的属性上还是通过样式属性),我在Firefox中都会出现以下错误:

未捕获的异常:[异常......"WrappedNative原型对象上的非法操作"nsresult:"0x8057000c(NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)"location:"JS frame :: file:///home/russh/Desktop/test.html :: onclick ::第1行"数据:否]

是否可以调整此元素的大小,还是必须销毁它并动态创建新元素？

我用bootstrap.我希望用户能够选择画布大小,同时保持设计屏幕在div内响应.

<div class="row">
  <div class="col-xs-2 col-sm-2" id="border">content left</div>
  <div class="col-xs-6 col-sm-6" id="border">
    Width <input type="number" class="form-control"><br>
  Height <input type="number" class="form-control"><br>
  canvas
  <canvas id="canvas" width="500" height="300">  
  </canvas>

  </div>
  <div class="col-xs-2 col-sm-2" id="border">content right</div>

如何将画布的大小限制为div的大小？

我不知道是否有必要使用JavaScript.

编辑

应该考虑到用户输入宽度和高度值,并且画布必须与div成比例

https://jsfiddle.net/1a11p3ng/2/

我正在尝试创建一个在Canvas标签内绘制矩形的简单应用程序.我已经将Canvas调整为全屏,但每当我调整视口大小时,Canvas都会清除.我试图阻止它清除,只是保留其中的内容.有任何想法吗？

http://mediajux.com/experiments/canvas/drawing/

谢谢!

      /*
      * This is the primary class used for the application
      * @author Alvin Crespo
      */
      var app = (function(){

        var domBod          = document.body;
        var canvas          = null;
        var canvasWidth     = null;
        var canvasHeight     = null;

        return {

          //Runs after the DOM has achieved an onreadystatechange of "complete"
          initApplication: function()
          {
            //setup envrionment variables
            canvas = document.getElementById('canvas') || null;

            //we need to resize the canvas at the start of the app to be the full window
            this.windowResized(); …

我怎样才能实现,以便HTML5 canvas元素可以调整大小？

我想实现这个元素,以便您可以以任何大小缩放它.缩放的事件应该是捕捉边缘并且用户调整元素大小的鼠标.

我已经阅读过如何在canvas元素中的对象上实现这一点.但在我的情况下,我需要在canvas元素本身(<canvas>)上.