javascript - 如何在 Canvas 上制作一个长方形的小三 Angular 形？

Question

我想添加一个类似于这个例子的小三 Angular 形:

正如您从图像中看到的那样，边的中间有一个三 Angular 形，我希望在 Canvas 中有它。

这是我目前的情况

// JavaScript for drawing on canvas
// applying colors + three triangles

function draw() {
  // canvas with id="myCanvas"
  var canvas = document.getElementById('myCanvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    roundRect(ctx, 100, 100, 180, 60, 10, true);
  }
}


function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
  if (typeof stroke == "undefined") {
    stroke = true;
  }
  if (typeof radius === "undefined") {
    radius = 5;
  }
  ctx.beginPath();
  ctx.moveTo(x + radius, y);
  ctx.lineTo(x + width - radius, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
  ctx.lineTo(x + width, y + height - radius);
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
  ctx.lineTo(x + radius, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
  ctx.lineTo(x, y + radius);
  ctx.quadraticCurveTo(x, y, x + radius, y);
  ctx.closePath();
  if (stroke) {
    ctx.stroke();
  }
  if (fill) {
    ctx.fill();
  }
}

draw();

<canvas id="myCanvas" width="700" height="410">
  <p>Some default content can appear here.</p>
</canvas>
<p>Triangles!</p>

Answer 1

4 个弧形圆框加一个三 Angular 形适合..

您可以创建一个只有圆 Angular 的圆框。添加三 Angular 形只是在绘制两个 Angular 之间设置 3 个点。

该示例绘制了两种类型的引号框，左引号框和右引号框。

大小、 Angular 半径、三 Angular 形大小和位置都设置为参数。

动画只是为了展示可能的变化。

const ctx = canvas.getContext("2d");


// r is radius of corners in pixels
// quoteSize in pixels
// quotePos as fraction of avalible space 0-1
function roundedQuoteBoxLeft(x, y, w, h, r, quoteSize, quotePos) {

  // draw 4 corners of box from top, left, top right , bottom right, bottom left
  ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
  ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
  ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
  ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
  
  // make sure trianle fits
  if (quoteSize > h - r * 2) { quoteSize = h - r * 2 }

  // get triangle position
  var qy = (h - (r * 2 + quoteSize)) * quotePos + r + y;
  
  // draw triangle
  ctx.lineTo(x, qy + quoteSize);
  ctx.lineTo(x - quoteSize, qy + quoteSize / 2);
  ctx.lineTo(x, qy);

 // and add the last line back to start
  ctx.closePath();
}

function roundedQuoteBoxRight(x, y, w, h, r, quoteSize, quotePos) {

  // draw top arcs from left to right
  ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
  ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);

  // make sure trianle fits
  if (quoteSize > h - r * 2) { quoteSize = h - r * 2 }

  // get pos of triangle
  var qy = (h - (r * 2 + quoteSize)) * quotePos + r + y;

  // draw triangle
  ctx.lineTo(x + w, qy);
  ctx.lineTo(x + w + quoteSize, qy + quoteSize / 2);
  ctx.lineTo(x + w, qy + quoteSize);

  // draw remaining arcs
  ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
  ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);

  // and add the last line back to start
  ctx.closePath();
}


function sin(time) {
  return Math.sin(time) * 0.5 + 0.5;
}
requestAnimationFrame(drawIt)

function drawIt(time) {
  ctx.clearRect(0, 0, 500, 250);
  // get some sizes 
  var width = sin(time / 1000) * 100 + 100;
  var height = sin(time / 1300) * 50 + 100;
  var radius = sin(time / 900) * 20 + 5;
  var x = sin(time / 1900) * 20 + 20;
  var y = sin(time / 1400) * 50 + 10;
  var quotePos = sin(time / 700)
  var quoteSize = x - 10;
  
  
  // set up box render
  
  ctx.lineJoin = "round";
  ctx.strokeStyle = "#8D4";
  ctx.lineWidth = 4;
  ctx.fillStyle = "#482";
  
  // draw left quote box
  ctx.beginPath();
  roundedQuoteBoxLeft(x, y, width, height, radius, quoteSize, quotePos);
  ctx.fill();
  ctx.stroke()
  
  
  x += width + 10;
  width = 500 - x - quoteSize;
  
  // draw right quote box
  ctx.beginPath();
  roundedQuoteBoxRight(x, y, width, height, radius, quoteSize, quotePos);
  ctx.fill();
  ctx.stroke()

  /// animate
  requestAnimationFrame(drawIt)
}

<canvas id="canvas" width="500" height="250"></canvas>