javascript - 在 div 元素中动态调整 Canvas 大小

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 设置 Canvas 标签的宽度/高度会导致 Canvas 变形。

查看此问题，了解如何通过 JavaScript 中的调整大小处理程序动态调整 Canvas 大小的示例:HTML5 Canvas 100% Width Height of Viewport?

希望对您有所帮助!