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% Width Height of Viewport?

希望它有所帮助！

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

1 个答案: