在div元素中動態調整畫布大小

Question

我正在一個網站上工作，我想把我放在標題標簽之間的東西放在頁面本身上。 我也想做一些操作文本，如添加邊框。 我試圖用canvas元素做到這一點，我已經能夠成功完成，但我無法弄清楚如何使它成比例。

我找到了幾個答案，如果它占據整個屏幕，但不在div元素內，如何縮放。 我剛剛開始學習HTML5，並且在得到任何幫助之前從未做過這樣的事情。

以下javascript代碼：

function makeCanvas(){
//1- Get Object
var canvas1 = document.getElementById('titlearea');
var ctx1 = canvas1.getContext('2d');
var title =  document.getElementById('pagetitle').text;

//2- Set parameters
ctx1.font = '32pt Arial';
ctx1.fillStyle = 'DeepSkyBlue';
ctx1.strokeStyle = 'Black';

//3- Action
ctx1.fillText(title,200,50);
ctx1.strokeText(title,200,50);
  }

下面的HTML代碼段：

<div id="title">
    <canvas id="titlearea" width="2000" height="75"></canvas>
</div>

下面的CSS片段：

#title{
        background-color: #E6E6FA;
        color: #196405;
        font-size: large;
        border-bottom:1px solid #000000;
        padding: 1px;
        text-align: center;
        margin:0;
        width: 100%;
        height: 75px;
      }

任何幫助表示贊賞。

Answer 1

您需要在canvas標記上設置明確的高度和寬度。 根據我的經驗，使用CSS設置畫布標簽的寬度/高度會導致畫布失真。

請看一下這個問題，了解如何通過JavaScript中的resize處理程序動態調整畫布大小： HTML5 Canvas視口的100％寬度高度？

希望能幫助到你！