那些遇到过的问题

带圆角的html5画布三角形

Joh*_*Doe 3 html javascript canvas

我是 HTML5 Canvas 的新手，我正在尝试绘制一个带圆角的三角形。

我试过了

ctx.lineJoin = "round";
ctx.lineWidth = 20;
Run Code Online (Sandbox Code Playgroud)

但他们都没有工作。

这是我的代码：

ctx.lineJoin = "round";
ctx.lineWidth = 20;
Run Code Online (Sandbox Code Playgroud) 
var ctx = document.querySelector("canvas").getContext('2d');

ctx.scale(5, 5);
    
var x = 18 / 2;
var y = 0;
var triangleWidth = 18;
var triangleHeight = 8;

// how to round this triangle??
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + triangleWidth / 2, y + triangleHeight);
ctx.lineTo(x - triangleWidth / 2, y + triangleHeight);
ctx.closePath();
ctx.fillStyle = "#009688";
ctx.fill();
    
ctx.fillStyle = "#8BC34A";
ctx.fillRect(0, triangleHeight, 9, 126);
ctx.fillStyle = "#CDDC39";
ctx.fillRect(9, triangleHeight, 9, 126);
Run Code Online (Sandbox Code Playgroud)

你可以帮帮我吗？

Bli*_*n67 11

圆角

我经常使用的一个无价函数是圆角多边形。它需要一组 2D 点来描述多边形的顶点并添加圆弧来圆角。

圆角和保持在多边形区域的约束范围内的问题是您不能总是适合具有特定半径的圆角。

在这些情况下，您可以忽略拐角并将其保留为尖角，或者您可以减小圆角半径以尽可能地适合拐角。

如果拐角太尖并且从拐角开始的线条不够长而无法获得所需的半径，则以下函数将调整拐角圆角半径的大小以适合拐角。

请注意，如果您想知道发生了什么，代码中的注释会参考下面的数学部分。

roundedPoly（ctx，点，半径）

// ctx is the context to add the path to
// points is a array of points [{x :?, y: ?},...
// radius is the max rounding radius 
// this creates a closed polygon.
// To draw you must call between 
//    ctx.beginPath();
//    roundedPoly(ctx, points, radius);
//    ctx.stroke();
//    ctx.fill();
// as it only adds a path and does not render. 
function roundedPoly(ctx, points, radiusAll) {
  var i, x, y, len, p1, p2, p3, v1, v2, sinA, sinA90, radDirection, drawDirection, angle, halfAngle, cRadius, lenOut,radius;
  // convert 2 points into vector form, polar form, and normalised 
  var asVec = function(p, pp, v) {
    v.x = pp.x - p.x;
    v.y = pp.y - p.y;
    v.len = Math.sqrt(v.x * v.x + v.y * v.y);
    v.nx = v.x / v.len;
    v.ny = v.y / v.len;
    v.ang = Math.atan2(v.ny, v.nx);
  }
  radius = radiusAll;
  v1 = {};
  v2 = {};
  len = points.length;
  p1 = points[len - 1];
  // for each point
  for (i = 0; i < len; i++) {
    p2 = points[(i) % len];
    p3 = points[(i + 1) % len];
    //-----------------------------------------
    // Part 1
    asVec(p2, p1, v1);
    asVec(p2, p3, v2);
    sinA = v1.nx * v2.ny - v1.ny * v2.nx;
    sinA90 = v1.nx * v2.nx - v1.ny * -v2.ny;
    angle = Math.asin(sinA < -1 ? -1 : sinA > 1 ? 1 : sinA);
    //-----------------------------------------
    radDirection = 1;
    drawDirection = false;
    if (sinA90 < 0) {
      if (angle < 0) {
        angle = Math.PI + angle;
      } else {
        angle = Math.PI - angle;
        radDirection = -1;
        drawDirection = true;
      }
    } else {
      if (angle > 0) {
        radDirection = -1;
        drawDirection = true;
      }
    }
    if(p2.radius !== undefined){
        radius = p2.radius;
    }else{
        radius = radiusAll;
    }
    //-----------------------------------------
    // Part 2
    halfAngle = angle / 2;
    //-----------------------------------------

    //-----------------------------------------
    // Part 3
    lenOut = Math.abs(Math.cos(halfAngle) * radius / Math.sin(halfAngle));
    //-----------------------------------------

    //-----------------------------------------
    // Special part A
    if (lenOut > Math.min(v1.len / 2, v2.len / 2)) {
      lenOut = Math.min(v1.len / 2, v2.len / 2);
      cRadius = Math.abs(lenOut * Math.sin(halfAngle) / Math.cos(halfAngle));
    } else {
      cRadius = radius;
    }
    //-----------------------------------------
    // Part 4
    x = p2.x + v2.nx * lenOut;
    y = p2.y + v2.ny * lenOut;
    //-----------------------------------------
    // Part 5
    x += -v2.ny * cRadius * radDirection;
    y += v2.nx * cRadius * radDirection;
    //-----------------------------------------
    // Part 6
    ctx.arc(x, y, cRadius, v1.ang + Math.PI / 2 * radDirection, v2.ang - Math.PI / 2 * radDirection, drawDirection);
    //-----------------------------------------
    p1 = p2;
    p2 = p3;
  }
  ctx.closePath();
}
Run Code Online (Sandbox Code Playgroud)

您可能希望为每个点添加一个半径，例如{x :10,y:10,radius:20}这将设置该点的最大半径。零半径将不会四舍五入。

数学

下面的插图显示了两种可能性之一，要拟合的角度小于 90 度，另一种情况（大于 90 度）只有一些细微的计算差异（参见代码）。 在角落显示圆圈

角由红色A、B和C 中的三个点定义。圆的半径是r，我们需要找到圆心的绿色点F以及定义圆弧起点和终点角度的D和E。

首先，我们找到来自B、A和B、C的线之间的角度，这是通过对两条线的向量进行归一化并获得叉积来完成的。（作为第 1 部分评论）我们还找到了BC线与BA成90 度的线的角度，因为这将有助于确定将圆放在线的哪一边。

现在我们有了线之间的角度，我们知道这个角度的一半定义了圆心所在的线F但我们不知道该点离B 有 多远（作为第 2 部分评论）

有两个相同的直角三角形BDF和BEF。我们有B处的角度，我们知道边DF和EF等于圆r的半径，因此我们可以求解三角形以获得B到F 的距离

为了方便而不是计算F是求解BD （作为第 3 部分注释），因为我将沿着BC线移动那个距离（作为第 4 部分注释）然后转动 90 度并向上移动到F （作为第 5 部分注释）这在该过程给出点D并沿线BA移动到E

我们使用点D和E以及圆心F（以它们的抽象形式）来计算弧的起点和终点角度。（在 arc 函数第 6 部分完成）

代码的其余部分涉及沿线和远离线移动的方向以及扫掠弧的方向。

代码部分（特殊部分 A）使用线BA和BC的长度，并将它们与到BD的距离进行比较，如果该距离大于我们知道弧线无法容纳的线长度的一半。如果线BD是BA和BC最短线长度的一半，我然后求解三角形以找到半径DF

示例使用。

该代码段是使用上述函数的一个简单示例。单击以向画布添加点（创建多边形需要至少 3 个点）。您可以拖动点并查看角半径如何适应尖角或短线。代码段运行时的更多信息。要重新启动，请重新运行代码段。（有很多额外的代码可以忽略）

角半径设置为 30。

// ctx is the context to add the path to
// points is a array of points [{x :?, y: ?},...
// radius is the max rounding radius 
// this creates a closed polygon.
// To draw you must call between 
//    ctx.beginPath();
//    roundedPoly(ctx, points, radius);
//    ctx.stroke();
//    ctx.fill();
// as it only adds a path and does not render. 
function roundedPoly(ctx, points, radiusAll) {
  var i, x, y, len, p1, p2, p3, v1, v2, sinA, sinA90, radDirection, drawDirection, angle, halfAngle, cRadius, lenOut,radius;
  // convert 2 points into vector form, polar form, and normalised 
  var asVec = function(p, pp, v) {
    v.x = pp.x - p.x;
    v.y = pp.y - p.y;
    v.len = Math.sqrt(v.x * v.x + v.y * v.y);
    v.nx = v.x / v.len;
    v.ny = v.y / v.len;
    v.ang = Math.atan2(v.ny, v.nx);
  }
  radius = radiusAll;
  v1 = {};
  v2 = {};
  len = points.length;
  p1 = points[len - 1];
  // for each point
  for (i = 0; i < len; i++) {
    p2 = points[(i) % len];
    p3 = points[(i + 1) % len];
    //-----------------------------------------
    // Part 1
    asVec(p2, p1, v1);
    asVec(p2, p3, v2);
    sinA = v1.nx * v2.ny - v1.ny * v2.nx;
    sinA90 = v1.nx * v2.nx - v1.ny * -v2.ny;
    angle = Math.asin(sinA < -1 ? -1 : sinA > 1 ? 1 : sinA);
    //-----------------------------------------
    radDirection = 1;
    drawDirection = false;
    if (sinA90 < 0) {
      if (angle < 0) {
        angle = Math.PI + angle;
      } else {
        angle = Math.PI - angle;
        radDirection = -1;
        drawDirection = true;
      }
    } else {
      if (angle > 0) {
        radDirection = -1;
        drawDirection = true;
      }
    }
    if(p2.radius !== undefined){
        radius = p2.radius;
    }else{
        radius = radiusAll;
    }
    //-----------------------------------------
    // Part 2
    halfAngle = angle / 2;
    //-----------------------------------------

    //-----------------------------------------
    // Part 3
    lenOut = Math.abs(Math.cos(halfAngle) * radius / Math.sin(halfAngle));
    //-----------------------------------------

    //-----------------------------------------
    // Special part A
    if (lenOut > Math.min(v1.len / 2, v2.len / 2)) {
      lenOut = Math.min(v1.len / 2, v2.len / 2);
      cRadius = Math.abs(lenOut * Math.sin(halfAngle) / Math.cos(halfAngle));
    } else {
      cRadius = radius;
    }
    //-----------------------------------------
    // Part 4
    x = p2.x + v2.nx * lenOut;
    y = p2.y + v2.ny * lenOut;
    //-----------------------------------------
    // Part 5
    x += -v2.ny * cRadius * radDirection;
    y += v2.nx * cRadius * radDirection;
    //-----------------------------------------
    // Part 6
    ctx.arc(x, y, cRadius, v1.ang + Math.PI / 2 * radDirection, v2.ang - Math.PI / 2 * radDirection, drawDirection);
    //-----------------------------------------
    p1 = p2;
    p2 = p3;
  }
  ctx.closePath();
}
Run Code Online (Sandbox Code Playgroud) 
const ctx = canvas.getContext("2d");
const mouse = {
  x: 0,
  y: 0,
  button: false,
  drag: false,
  dragStart: false,
  dragEnd: false,
  dragStartX: 0,
  dragStartY: 0
}

function mouseEvents(e) {
  mouse.x = e.pageX;
  mouse.y = e.pageY;
  const lb = mouse.button;
  mouse.button = e.type === "mousedown" ? true : e.type === "mouseup" ? false : mouse.button;
  if (lb !== mouse.button) {
    if (mouse.button) {
      mouse.drag = true;
      mouse.dragStart = true;
      mouse.dragStartX = mouse.x;
      mouse.dragStartY = mouse.y;
    } else {
      mouse.drag = false;
      mouse.dragEnd = true;
    }
  }
}
["down", "up", "move"].forEach(name => document.addEventListener("mouse" + name, mouseEvents));

const pointOnLine = {x:0,y:0};
function distFromLines(x,y,minDist){   
  var index = -1;
  const v1 = {};
  const v2 = {};
  const v3 = {};
  const point = P2(x,y);
  eachOf(polygon,(p,i)=>{
    const p1 = polygon[(i + 1) % polygon.length];
    v1.x = p1.x - p.x;
    v1.y = p1.y - p.y;
    v2.x = point.x - p.x;
    v2.y = point.y - p.y;
    const u = (v2.x * v1.x + v2.y * v1.y)/(v1.y * v1.y + v1.x * v1.x);
    if(u >= 0 && u <= 1){
      v3.x = p.x + v1.x * u;
      v3.y = p.y + v1.y * u;
      dist = Math.hypot(v3.y - point.y, v3.x - point.x);
      if(dist < minDist){
        minDist = dist;
        index = i;
        pointOnLine.x = v3.x;
        pointOnLine.y = v3.y;
      }
    }
  })
  return index;
  
}



function roundedPoly(ctx, points, radius) {
  var i, x, y, len, p1, p2, p3, v1, v2, sinA, sinA90, radDirection, drawDirection, angle, halfAngle, cRadius, lenOut;
  var asVec = function(p, pp, v) {
    v.x = pp.x - p.x;
    v.y = pp.y - p.y;
    v.len = Math.sqrt(v.x * v.x + v.y * v.y);
    v.nx = v.x / v.len;
    v.ny = v.y / v.len;
    v.ang = Math.atan2(v.ny, v.nx);
  }
  v1 = {};
  v2 = {};
  len = points.length;
  p1 = points[len - 1];
  for (i = 0; i < len; i++) {
    p2 = points[(i) % len];
    p3 = points[(i + 1) % len];
    asVec(p2, p1, v1);
    asVec(p2, p3, v2);
    sinA = v1.nx * v2.ny - v1.ny * v2.nx;
    sinA90 = v1.nx * v2.nx - v1.ny * -v2.ny;
    angle = Math.asin(sinA);
    radDirection = 1;
    drawDirection = false;
    if (sinA90 < 0) {
      if (angle < 0) {
        angle = Math.PI + angle;
      } else {
        angle = Math.PI - angle;
        radDirection = -1;
        drawDirection = true;
      }
    } else {
      if (angle > 0) {
        radDirection = -1;
        drawDirection = true;
      }
    }
    halfAngle = angle / 2;
    lenOut = Math.abs(Math.cos(halfAngle) * radius / Math.sin(halfAngle));
    if (lenOut > Math.min(v1.len / 2, v2.len / 2)) {
      lenOut = Math.min(v1.len / 2, v2.len / 2);
      cRadius = Math.abs(lenOut * Math.sin(halfAngle) / Math.cos(halfAngle));
    } else {
      cRadius = radius;
    }
    x = p2.x + v2.nx * lenOut;
    y = p2.y + v2.ny * lenOut;
    x += -v2.ny * cRadius * radDirection;
    y += v2.nx * cRadius * radDirection;
    ctx.arc(x, y, cRadius, v1.ang + Math.PI / 2 * radDirection, v2.ang - Math.PI / 2 * radDirection, drawDirection);
    p1 = p2;
    p2 = p3;
  }
  ctx.closePath();
}
const eachOf = (array, callback) => { var i = 0; while (i < array.length && callback(array[i], i++) !== true); };
const P2 = (x = 0, y = 0) => ({x, y});
const polygon = [];

function findClosestPointIndex(x, y, minDist) {
  var index = -1;
  eachOf(polygon, (p, i) => {
    const dist = Math.hypot(x - p.x, y - p.y);
    if (dist < minDist) {
      minDist = dist;
      index = i;
    }
  });
  return index;
}


// short cut vars 
var w = canvas.width;
var h = canvas.height;
var cw = w / 2; // center 
var ch = h / 2;
var dragPoint;
var globalTime;
var closestIndex = -1;
var closestLineIndex = -1;
var cursor = "default";
const lineDist = 10;
const pointDist = 20;
var toolTip = "";
// main update function
function update(timer) {
  globalTime = timer;
  cursor = "crosshair";
  toolTip = "";
  ctx.setTransform(1, 0, 0, 1, 0, 0); // reset transform
  ctx.globalAlpha = 1; // reset alpha
  if (w !== innerWidth - 4 || h !== innerHeight - 4) {
    cw = (w = canvas.width = innerWidth - 4) / 2;
    ch = (h = canvas.height = innerHeight - 4) / 2;
  } else {
    ctx.clearRect(0, 0, w, h);
  }
  if (mouse.drag) {
    if (mouse.dragStart) {
      mouse.dragStart = false;
      closestIndex = findClosestPointIndex(mouse.x,mouse.y, pointDist);
      if(closestIndex === -1){        
        closestLineIndex = distFromLines(mouse.x,mouse.y,lineDist);
        if(closestLineIndex === -1){
          polygon.push(dragPoint = P2(mouse.x, mouse.y));
        }else{
          polygon.splice(closestLineIndex+1,0,dragPoint = P2(mouse.x, mouse.y));
        }
        
      }else{
        dragPoint = polygon[closestIndex];
      }
    }
    dragPoint.x = mouse.x;
    dragPoint.y = mouse.y
    cursor = "none";
  }else{
    closestIndex = findClosestPointIndex(mouse.x,mouse.y, pointDist);
    if(closestIndex === -1){
      closestLineIndex = distFromLines(mouse.x,mouse.y,lineDist);
      if(closestLineIndex > -1){
        toolTip = "Click to cut line and/or drag to move.";
      }
    }else{
      toolTip = "Click drag to move point.";
      closestLineIndex = -1;
    }
  }
  ctx.lineWidth = 4;
  ctx.fillStyle = "#09F";
  ctx.strokeStyle = "#000";
  ctx.beginPath();
  roundedPoly(ctx, polygon, 30);
  ctx.stroke();
  ctx.fill();
  ctx.beginPath();
  ctx.strokeStyle = "red";
  ctx.lineWidth = 0.5;
  eachOf(polygon, p => ctx.lineTo(p.x,p.y) );
  ctx.closePath();
  ctx.stroke();
  ctx.strokeStyle = "orange";
  ctx.lineWidth = 1;
  eachOf(polygon, p => ctx.strokeRect(p.x-2,p.y-2,4,4) );
  if(closestIndex > -1){
     ctx.strokeStyle = "red";
     ctx.lineWidth = 4;
     dragPoint = polygon[closestIndex];
     ctx.strokeRect(dragPoint.x-4,dragPoint.y-4,8,8);
     cursor = "move";
  }else if(closestLineIndex > -1){
     ctx.strokeStyle = "red";
     ctx.lineWidth = 4;
     var p = polygon[closestLineIndex];
     var p1 = polygon[(closestLineIndex + 1) % polygon.length];
     ctx.beginPath();
     ctx.lineTo(p.x,p.y);
     ctx.lineTo(p1.x,p1.y);
     ctx.stroke();
     ctx.strokeRect(pointOnLine.x-4,pointOnLine.y-4,8,8);
     cursor = "pointer";     
  
  
  }

  if(toolTip === "" && polygon.length < 3){
    toolTip = "Click to add a corners of a polygon.";
  }
  canvas.title = toolTip;
  canvas.style.cursor = cursor;
  requestAnimationFrame(update);
}
requestAnimationFrame(update);
Run Code Online (Sandbox Code Playgroud) 
canvas {
  border: 2px solid black;
  position: absolute;
  top: 0px;
  left: 0px;
}
Run Code Online (Sandbox Code Playgroud)

B1C*_*0PS 6

我开始使用 @Blindman67 的答案，它适用于基本的静态形状。

我遇到了一个问题，即在使用圆弧方法时，两个点彼此相邻与只有一个点有很大不同。两个点彼此相邻，它不会被四舍五入，即使这是您的眼睛所期望的。如果您正在为多边形点设置动画，这会更加刺耳。

我改用贝塞尔曲线解决了这个问题。IMO 这在概念上也更清洁一些。我只是用二次曲线制作每个角，其中控制点是原始角所在的位置。这样，在同一地点有两个点实际上与只有一个点相同。

我没有比较性能，但似乎 canvas 非常擅长绘制贝塞尔曲线。

与@Blindman67 的回答一样，这实际上并没有绘制任何内容，因此您需要在ctx.startPath()前后调用ctx.stroke()。

/**
 * Draws a polygon with rounded corners 
 * @param {CanvasRenderingContext2D} ctx The canvas context
 * @param {Array} points A list of `{x, y}` points
 * @radius {number} how much to round the corners
 */
function myRoundPolly(ctx, points, radius) {
    const distance = (p1, p2) => Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2)

    const lerp = (a, b, x) => a + (b - a) * x

    const lerp2D = (p1, p2, t) => ({
        x: lerp(p1.x, p2.x, t),
        y: lerp(p1.y, p2.y, t)
    })

    const numPoints = points.length

    let corners = []
    for (let i = 0; i < numPoints; i++) {
        let lastPoint = points[i]
        let thisPoint = points[(i + 1) % numPoints]
        let nextPoint = points[(i + 2) % numPoints]

        let lastEdgeLength = distance(lastPoint, thisPoint)
        let lastOffsetDistance = Math.min(lastEdgeLength / 2, radius)
        let start = lerp2D(
            thisPoint,
            lastPoint,
            lastOffsetDistance / lastEdgeLength
        )

        let nextEdgeLength = distance(nextPoint, thisPoint)
        let nextOffsetDistance = Math.min(nextEdgeLength / 2, radius)
        let end = lerp2D(
            thisPoint,
            nextPoint,
            nextOffsetDistance / nextEdgeLength
        )

        corners.push([start, thisPoint, end])
    }

    ctx.moveTo(corners[0][0].x, corners[0][0].y)
    for (let [start, ctrl, end] of corners) {
        ctx.lineTo(start.x, start.y)
        ctx.quadraticCurveTo(ctrl.x, ctrl.y, end.x, end.y)
    }

    ctx.closePath()
}
Run Code Online (Sandbox Code Playgroud)

tra*_*r53 2

用于连接线条的样式，例如ctx.lineJoin="round"应用于路径上的笔划操作 - 即考虑它们的宽度、颜色、图案、虚线/点线和类似的线条样式属性。

线条样式不适用于填充路径的内部。

因此，要影响线型，stroke需要进行操作。在以下对已发布代码的改编中，我翻译了画布输出以查看结果而无需裁剪，并描边了三角形的路径，但没有描画其下方的矩形：

var ctx = document.querySelector("canvas").getContext('2d');

ctx.scale(5, 5);
ctx.translate( 18, 12);
    
var x = 18 / 2;
var y = 0;
var triangleWidth = 48;
var triangleHeight = 8;

// how to round this triangle??

ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + triangleWidth / 2, y + triangleHeight);
ctx.lineTo(x - triangleWidth / 2, y + triangleHeight);
ctx.closePath();
ctx.fillStyle = "#009688";
ctx.fill();

// stroke the triangle path.

ctx.lineWidth = 3;
ctx.lineJoin = "round";
ctx.strokeStyle = "orange";
ctx.stroke();
    
ctx.fillStyle = "#8BC34A";
ctx.fillRect(0, triangleHeight, 9, 126);
ctx.fillStyle = "#CDDC39";
ctx.fillRect(9, triangleHeight, 9, 126);
Run Code Online (Sandbox Code Playgroud) 
<canvas width="800" height="600"></canvas>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

2542 次

最近记录：

5 年 前
相关归档
如何在contenteditable元素(div)中设置插入符号(光标)？ 172
如何禁用子元素触发的mouseout事件？ 103
如何摆脱Aptana中的黑色背景并使其成为正常的白色？ 32
Bootstrap - 5列布局 32
div周围的边界不完整 22
当用户将鼠标悬停在图像上时防止 Edge 显示视觉搜索图标 21
如何使用jquery在里面找到具有指定文本的按钮？ 17
如何在html5画布上绘制圆形扇区？ 15
了解HTML 5画布比例和翻译顺序 12
CSS：在保持宽高比的同时使Canvas尽可能大 6
难疑归档
如何异步上传文件？ 2841
在JavaScript中编码URL？ 2392
是否有标准函数来检查JavaScript中的null,undefined或blank变量？ 2088
显示两个修订版之间已更改的文件 2041
为什么Python 3中的"1000000000000000在范围内(1000000000000001)"如此之快？ 1890
禁用Chrome缓存以进行网站开发 1563
<快于<=？ 1508
如何为所有浏览器垂直居中div？ 1310
JavaScript中是否有"null coalescing"运算符？ 1305
有效地使用Git和Dropbox？ 1117