javascript - html 将文本放到 Canvas 上

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时，文本“测试测试测试测试测试测试测试测试”仅超过 Canvas 的宽度，因此其余部分没有出现。如果文本的长度很长，我希望 Canvas (矩形)有一个滚动条，这样我就可以向下滚动以查看整个文本。

我刚开始，所以我对布局(css)部分不是很熟悉。有人可以给我一些建议吗？

Answer 1

您可以使用包含较大 Canvas 的小 div，使该 div 充当带有滚动条的“视口(viewport)”，进入较大的 Canvas 。

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>

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