如何在canvas中绘制标签图标？

Question

我想在 canvas 中制作一个像图标一样的标签，但是很难在中间打孔并且没有线条。

如果可能的话，我想把它做成图片中的样子，因为这里我只尝试了基本形状。图片示例：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(100, 30, 150, 100);
ctx.lineWidth = 1;
ctx.stroke();
ctx.beginPath();
ctx.translate(c.width/2,c.height/2);
ctx.moveTo(0,0);
ctx.lineTo(0,0-100);
ctx.rotate(Math.PI / 3);
ctx.lineTo(0,0-100);
ctx.closePath();
ctx.stroke();

<canvas id="myCanvas" width="500" height="260" style="border:1px solid #d3d3d3;">

Answer 1

你有一个好的开始，我们只需要用 ctx.arc( 画圆，然后用 globalCompositeOperation 切出与你的图片匹配的洞。

在下面的示例中，我创建了一个函数来绘制标签，这样我们就可以重复绘制多个标签

您以后可以做的改进，可能会传递更多参数以更好地控制三角形的大小和圆的半径，当然还可以添加完全由您决定的颜色。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 1;

function drawTag(x, y, w, h) {
  ctx.beginPath();
  ctx.rect(x, y, w, h);

  ctx.moveTo(x + w, y);
  ctx.lineTo(x + w + w / 2, y + h / 2);
  ctx.lineTo(x + w, y + h);
  ctx.fill();

  ctx.beginPath();
  ctx.globalCompositeOperation = 'destination-out';
  ctx.arc(x + w + w / 8, y + h / 2, h / 8, 0, 8, false)
  ctx.fill();
  ctx.globalCompositeOperation = 'source-over';
}

drawTag(10, 10, 75, 50)

ctx.translate(140,50);
ctx.rotate(1);
drawTag(0, 0, 60, 40)

ctx.translate(40,60);
ctx.rotate(2);
drawTag(0, 0, 50, 30)

<canvas id="myCanvas" style="border:1px solid #d3d3d3;">

如何在canvas中绘制标签图标？

How to draw a tag icon in canvas?

html

javascript

html5-canvas