0
133
Views¿Cómo dibujar un icono de etiqueta en el lienzo?
Estoy tratando de hacer una etiqueta como un ícono en el lienzo, pero tengo dificultades para hacer el agujero perforado en el medio sin líneas.
Si es posible, me gustaría hacerlo como en la imagen, ya que aquí probé solo con formas básicas. Ejemplo de imagen: 
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;">1 answers
Answer question0
Tuviste un buen comienzo, solo necesitábamos dibujar el círculo con ctx.arc( y usar globalCompositeOperation para cortar el agujero para que coincida con tu imagen.
En mi ejemplo a continuación, creé una función que dibuja la etiqueta, de esa manera podemos reutilizarla para dibujar varias etiquetas.
Las mejoras que podría hacer más tarde, tal vez pasar más parámetros para tener más control sobre qué tan grande es ese triángulo, también el radio del círculo y, por supuesto, agregar color, todo depende de usted.
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;">