我收到“无法设置属性..只有一个吸气剂”错误（javascript画布宽度）

问题描述 投票：0回答：1

更完整地，我得到：
“无法设置只有 getter 的 # 属性 clientWidth”
（显然我可以有一个 HTML 元素，但这是我的问题的最小化示例。）

但我找到了一个解决方案：编写我想要的 HTML 字符串并使用 

innerHTML = string
，而不是创建元素和附加。这样做有什么缺点吗？ 将代码中的“true”更改为“false”以演示解决方案：

<html>
  <head>
    <meta charset="utf-8">
    <style>
canvas { outline:1px dotted black; } 
    </style>
  </head>
  <body>
    <script>
  "use strict";
  if (true) { // this code has the error
    let elt = document.createElement('canvas');
    elt.setAttribute('id','canvas');
    elt.clientWidth = 500;
    elt.clientHeight = 500;
    document.body.appendChild(elt);
  } else {    // this has the workaround/solution
    let s = '<canvas id="canvas" width="500" height="500"></canvas>';
    document.body.innerHTML = s;
  }
  let ctx = canvas.getContext("2d");
  ctx.arc(250,250,200, 0, 6.2832);
  ctx.stroke();
    </script>
  </body>
</html>
javascript canvas size
1个回答
0
投票

clientWidth
属性是一个 compulated 属性，它是画布的实际屏幕宽度，由 css 和其他所有内容决定。这就是错误消息试图告诉您的内容。如果你突然告诉浏览器你想要实际宽度为 500px，浏览器突然必须确定如何通过 css 将宽度设置为 500px —— 并且有很多影响宽度的 css 属性，浏览器不知道该改变哪个。所以它只是不允许弄乱计算属性。

尝试设置 

canvas.width
。 （这就是您对 html 字符串所做的基本操作，设置宽度和高度属性。）

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.