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

【问题标题】：Dynamically resize canvas within div element在 div 元素中动态调整画布大小
【发布时间】：2013-05-24 21:57:46
【问题描述】：

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

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

CSS sn-p 如下：

#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;
      }

感谢任何帮助。

【问题讨论】：

标签： javascript css html canvas

【解决方案1】：

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

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

希望对你有帮助！

【讨论】：

太棒了。现在来弄清楚如何根据画布大小动态设置 X 和 Y 坐标。