在 div 元素中动态调整画布大小

Question

我正在一个网站上工作，我想把我放在标题标签之间的内容变成页面本身的一个元素。我还想对文本进行一些操作，例如添加边框。我正在尝试使用画布元素来做到这一点，我已经成功地做到了这一点，但我不知道如何使其缩放。

我找到了几个关于如何缩放（如果它占据整个屏幕但不在 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 中的调整大小处理程序动态调整画布大小的示例：HTML5 Canvas 100% Width Height of Viewport?

希望能帮助到你！