Question

因此，我试图在HTML5中进行编码，基本上，当用户登录时，他们可以进入房间，这就是我得到的。有人可以帮忙吗？

<script src="assets/styles/js/rooms.js"></script>

<canvas id="room">
  <div id="room">
    <div class="btn-exit" id="sortirImmediatement">
      <h1>Return to View</h1>
    </div> <!-- Bouton d'urgence -->

    <div class="appart-info-container"> <!-- Informations de l'appartement -->
      <div class="appart-info-name">
        <p>Welcome Lobby</p>
        <span>by Pure</span>
        <br><br>
      </div>
      <div class="appart-info-tools">
        <div class="liste-tools">
          <ul>
            <li><img src="assets/images/room/para.png">Settings</li>
            <li><img src="assets/images/room/zoom.png">Zoom</li>
            <li><img src="assets/images/room/chats.png">Chats</li>
            <li><img src="assets/images/room/like.png">Likes</li>
            <li id="ouvrirshareappart"><img src="assets/images/room/share.png">Share Room</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</canvas>

然后我的rooms.js是：

function drawCanvas(element, width, height){
    let canvas = element;canvas.width = width;canvas.height = height;
    let context = canvas.getContext('2d');
    return {context : context, dimension : {width : canvas.width, height : canvas.height}};

}

document.body.onload = function(){
    let plan =  drawCanvas(document.querySelector("#plan"), window.screen.width, 620),
    context = plan.context, dimension = plan.dimension,
    tileWidth = 70,
    tileHeight = 35,
    positionRoom = {x : dimension.width / 2, y : 40},
    roomDimension = {width : 15, length : 21}, room = drawRoom(roomDimension.width, roomDimension.length),
    Geometric = {DET : function(a, b){
        return (a.x * b.y - a.y * b.x);
    }, SEGMENT : function(a, b){
        return {x : b.x - a.x, y : b.y - a.y};
    }},
    activeBlock = tilePoint(room[0]),
    characterPosition = [0, 0],
    n = 0,
    completeClick = false;
    roomBlocks = [];
    dragPosition = {positionA : [dimension.width / 2, 40], positionB : [dimension.width / 2, 40], click : false};
    context.fillStyle = '#000';
    context.fillRect(0, 0, dimension.width, dimension.height);
    let sourceNotLoad = true;
    let compteur_image = 0;

使用画布和JavaScript是我的新手，因此我想尝试学习。基本上，当我单击房间按钮并且房间div弹出时，我希望显示画布。有什么想法吗？

提前感谢大家！

Answer 1

发生错误是因为您的HTML中没有ID为“ plan”的元素。在这种情况下，querySelector返回null。

返回值：一个HTMLElement对象，表示文档中与指定的CSS选择器集匹配的第一个元素，如果没有匹配项，则返回null。

Javascript错误-未捕获的TypeError：无法将属性'width'设置为null

1 个答案: