master

分支 (1)

管理

管理

master

put-in-some-code-snippets
/
canvas2img.html

```html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
  <title>Canvas tutorial</title>
  <style type="text/css">

  </style>
</head>

<body onload="draw();">
  <canvas id="tutorial" width="349" height="527">
    current stock price: $3.15 +0.15
  </canvas>
</body>
<script type="text/javascript">
  const vw = 349
  , vh = 527
  , list = [
    "订单日期: ********",
    "分销商编号: ********",
    "公司名称: ********",
    "项目活动号: ********",
    "服务开始时间: ********",
    "服务结束时间: ********",
    "积分对应含税采购金额(人命币): ********",
    "服务费2.5%(人民币): ********",
    "合计金额: ********",
    "备注: ********",
  ]

  function draw() {
    var canvas = document.getElementById('tutorial');
    if (canvas.getContext) {
      var ctx = canvas.getContext('2d');
      ctx.lineWidth = 1
      ctx.strokeStyle = "#0170FE"
      strokeRoundRect(ctx, 0, 0, vw, vh, 20)
      ctx.font = "bold 12px serif"
      ctx.strokeStyle = "#F4F4F4"

      let h = 35, index = 0
      for(let item of list) {
        ctx.fillText(item, 35, h)

        if (index++ == list.length - 2) break
        xLine(ctx, h+23)
        h+=57
      }
      var image = new Image();
      image.src = canvas.toDataURL("image/png");
      canvas.hidden = true
      document.body.appendChild(image);
    }
  }

  function strokeRoundRect(ctx, x, y, w, h, r) {
    var path = new Path2D();

    path.moveTo(x + r, y);
    path.lineTo(x + w - r, y);  // 右
    path.arc(x + w - r, y + r, r, Math.PI / 180 * 270, 0, false);
    path.lineTo(x + w, y + h - r);  // 下
    path.arc(x + w - r, y + h - r, r, 0, Math.PI / 180 * 90, 0, false);
    path.lineTo(x + r, y + h);  // 左
    path.arc(x + r, y + h - r, r, Math.PI / 180 * 90, Math.PI / 180 * 180, false);
    path.lineTo(x, y + r); // 上
    path.arc(x + r, y + r, r, Math.PI / 180 * 180, Math.PI / 180 * 270, false);

    ctx.stroke(path);
  }

  function xLine(ctx, h){
    var path = new Path2D();
    path.moveTo(0, h)
    path.lineTo(vw, h)
    ctx.stroke(path);
  }
</script>

</html>
```