4

我在一个网站上工作，我想把我放在标题标签之间的东西做成页面本身的元素。我还想对文本进行一些操作，例如添加边框。我正在尝试使用 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;
      }

任何帮助表示赞赏。

4

1 回答 1

5

您需要在canvas标签上设置明确的高度和宽度。根据我的经验，使用 CSS 设置画布标签的宽度/高度会导致画布变形。

看一下这个问题，了解如何通过 JavaScript 中的调整大小处理程序动态调整画布大小：HTML5 Canvas 100% Width Height of Viewport?

希望能帮助到你！

于 2013-05-24T13:57:46.560 回答