0

上記は、新しい HTMl5 キャンバス タグを試しているテスト Web サイトです。関連するコードを見つけやすくするために、少し削除しました。

私が抱えている問題は、キャンバスの幅と高さを設定するときに、.height メソッドと .width メソッドで返される値が、キャンバスがオーバーランするのを防ぐために取得しようとしている div よりも大きいことです。カプセル化する div。

JSbin へのリンク:

http://jsbin.com/ejivux/13/edit

人々がここでそれを望む場合に備えて、コード：

HTML:

<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <meta charset=utf-8 />
    <title>JS Bin</title>
  </head>
  <body>
    <div id="container">

     <div id="leftColumn">

        text

      </div>

      <div id="rightColumn">

      </div>

    </div>
  </body>
</html>

CSS:

canvas{
  border-width:5px;
  border-style:solid;
}

html{
  height:99%;
  background-color:red;
}

body{
  height:99%;
  background-color:blue;
}

#container{
  background-color:yellow;
  min-width:976px;
  min-height:99%;
  height:100%;
}

#leftColumn{
  background-color:pink;
  width:50%;
  min-height:100%;
  height:100;
  float:left;
}

#rightColumn{
  background-color:green;
  width:50%;
  min-height:100%;
  height:100%;
  float:left;
}

JS:

var canvasDiv = document.getElementById('rightColumn');
canvas = document.createElement('canvas');
canvas.setAttribute('width', $('#rightColumn').width());
canvas.setAttribute('height', $('#rightColumn').height());
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
4

1 に答える 1