HTML ввод текста на холсте

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, текст «тест тест тест тест тест тест test test test "просто превышает ширину холста, поэтому остальная часть не появляется. Я хочу, чтобы холст (прямоугольник) имел полосу прокрутки, если длина текста длинна, поэтому я могу прокрутить вниз, чтобы увидеть весь текст.

Я только что начал, поэтому я не знаком с частью макета (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>

BTW , у вас есть некоторые синтаксические ошибки в используемых вами командах стилизации контекста. Вот хорошая черная таблица всех допустимых методов и свойств холста: https://simon.html5.org/dump/html5-canvas-cheat-sheet.html