Question

HTML：

   <div>
   <canvas id="text_box"  class="textbox" >
   </canvas>
   </div>

CSS：

    .textbox{
        position:absolute;
        background: black;
        left:100px;
        width:750px;
        height:100%;
        margin: 0;
        padding: 0;
        border:0;
        opacity:0.9;
        display:none;
    }

的JavaScript

function drawCanvas() {
  var canvas = document.getElementById("text_box");
  var context = canvas.getContext('2d');

  context.lineWidth=1;
  context.fillRect(0,0,150,150);
  context.fillStyle="white";
  context.lineStyle="#ffff00";
  context.font="12px sans-serif";
  context.fillText("testestestsetestsetsetsetset.", 20, 20);
  context.rect(0,0,400,400);
  alert("test");
}

当我打开这个html时，文本“测试测试测试测试测试测试测试测试”刚刚超过画布的宽度，因此其余部分不会出现。如果文本的长度很长，我希望画布（矩形）有一个滚动条，所以我可以向下滚动查看整个文本。

我刚刚开始，所以我不熟悉布局（css）部分。有人可以给我一些建议吗？

Answer 1

您可以使用包含较大画布的小div将该div作为“视口”，将滚动条放入较大的画布中。

HTML：

<div id=viewport>
    <canvas id="canvas" width=750 height=300></canvas>
</div>

CSS：

#canvas{border:1px solid red;}
#viewport{
    overflow:scroll;
    width:200px; height:200px;
    border:2px solid blue;
}

这是示例代码和演示：

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

context.strokeStyle="#ffff00";
context.font="24px verdana";
context.fillText("This is some long text that will require scrolling to read.", 20, 50);

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}
#viewport{
  overflow:scroll;
  width:200px; height:100px;
  border:2px solid blue;
}

<div id=viewport>
  <canvas id="canvas" width=750 height=150></canvas>
</div>

顺便说一下，您在使用的上下文样式命令中有一些语法错误。这是所有有效画布方法和属性的精美备忘单：https://simon.html5.org/dump/html5-canvas-cheat-sheet.html

将文本放入画布的html

1 个答案: