Question

我正在尝试创建一个基于ID输入的名片，它会迭代我的对象并在按钮点击时获取相关数据。我想在canvas元素的对象中显示字段。最初我想在画布上显示它创建一个默认空间，我为fillText添加了代码我很难在浏览器上安排它。我想我需要添加CSS并播放高度和宽度。有人可以指导我什么是最好的方法。
此外，在Canvas-Sitepoint上阅读博客时，我发现我们可以使用Canvas API（如矩形）添加多个形状。由于不是在画布上显示卡片细节，而是尝试添加矩形形状，使其透明并在该矩形中添加数据以使其更具交互性。我需要一些指导。

var details = {
  "Employees": [{
    "ID": "Winterfall",
    "FirstName": "John",
    "LastName": "Snow",
    "email": "johnsnow@winterfall.com",
    "call": 121212,
    "Work": [{
      "company": "Google",
      "Designation": "Principle Architect"
    }]
  }, {
    "ID": "Castly Rock",
    "FirstName": "Tyrion",
    "LastName": "Lannister",
    "email": "tyrionLan@Castly.com",
    "call": 111111,
    "Work": [{
      "company": "Amazon",
      "Designation": "Vice President"
    }]
  }, {
    "ID": "High Garden",
    "FirstName": "Samuel",
    "LastName": "Tally",
    "email": "Samueltally@highgarden.com",
    "call": 777777,
    "Work": [{
      "Company": "Yahoo",
      "Designation": "Consultant"
    }]
  }]
};


function getEmployeeData() {
  var self = details,
    arr = [],
    value = document.getElementById("inputElement").value,
    isEmpId = self.Employees,
    len = isEmpId.length;

  for (var i = 0; i < len; i++) {
    if (value === isEmpId[i].ID) {
      var name = isEmpId[i].FirstName + " " + isEmpId[i].LastName
      call = isEmpId[i].call, email = isEmpId[i].email, company = isEmpId[i].Work[0].company,
        title = isEmpId[i].Work[0].Designation;
      drawCard(name, title, company, email, call);
      return true;
    }
  }

};

function drawCard(m, n, o, p, q) {

  var canvas = document.getElementById("rectangleCanvas");
  var context = canvas.getContext("2d");

  //context.textAlign = "center"
  context.fillText(m, 100, 100);
  context.fillText(n, 200, 50);
  context.fillText(o, 300, 60);
  context.fillText(p, 400, 70);
  context.fillText(q, 500, 80);
  //drawText(320, 080, "DEEPAK DWIJ", "rgb(80,80,80)");

  // var x = 20, y = 80, width=100, height=80; 

  // var shape = new Path2D();
  // shape.rect(x+100,y-50,width-40,height);

  // context.fillStyle = "#00695c";
  // context.fill(shape);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h4>Business card</h4>
<input type="text" id="inputElement" placeholder="Enter employee id">
<button id="button" onclick="getEmployeeData()">Click to get Data</button>
<br>
<hr>
<div>
  <canvas id="rectangleCanvas" height="300" width="500" style="border: solid 1px black;"></canvas>
</div>

Answer 1

HTML5 Canvas只是一个光栅图像。您不会在画布上添加形状和文字，您无法通过CSS操作它们;你只需在指定坐标的画布上绘制它们。

这样做的结果是，只要您需要更改（例如）画布中显示的文本，您就必须重绘整个内容。你的drawCard函数应该这样做。

另外，恕我直言，画布上任何不动态的形状都不应该使用代码绘制;相反，它应该是在绘制文本和其他动态形状之前在画布上绘制的静态图像上。

var backgroundImage = new Image();
backgroundImage.src = "URL_of_your_image.png";

function drawCard(m, n, o, p, q){
  var canvas = document.getElementById("rectangleCanvas");
  var context = canvas.getContext("2d");
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(backgroundImage, 0, 0);

  // Draw the text etc.
}

在编写任何代码之前，您应该事先设计卡的布局;例如，在一张方格纸中，您可以决定所有内容的位置，记下每个矩形的位置和尺寸，以便放置每个文本元素。先设计，后期实施;试图同时做这两件事会让你浪费很多时间。

为了正确布局文本，您可能需要在实际绘制画布中的文本之前使用context.measureText()方法。这是必须的：

多行文字
可能不适合您广告框宽度的可修改文字
复杂的文字布局，适用于阿拉伯语和梵文等剧本。

为了保持一致，您不应该依赖用户计算机中安装的默认字体;相反，你应该考虑使用网络字体。您应该使用Web Font Loader以确保在绘制文本之前加载字体。

我想在用户输入ID时在画布上创建一张名片

1 个答案: