matmatics的HAML5 Canvas问题[重复]

Posted 2023-03-05

【中文标题】matmatics的HAML5 Canvas问题[重复]

【英文标题】：HAML5 Canvas problems with matcmatics [duplicate]

【发布时间】：2015-05-25 10:09:56

【问题描述】：

您好，我正在使用 canvas 元素来创建 som 形状，但我遇到了一些数学问题。

问题 1： 我必须计算相对于上一行的角度，我只使用 0 到 180 度和 0 到 -180 度。

问题 1： 我必须在拐角处放置一个圆角半径我如何在画布上绘制它？ 这是一个例子：

希望有人能帮忙？

【问题讨论】：

拿出你的高中三角课本。

【参考方案1】：

您可以使用二次曲线来制作圆角：

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


roundedRect(20,20,100,75,10);
ctx.stroke();


function roundedRect(x,y,width,height,radius)
    //
    var x1=x+radius;
    var x2=x+width-radius;
    var x3=x+width;
    var y1=y+radius;
    var y2=y+height-radius;
    var y3=y+height;
    //
    ctx.beginPath();
    ctx.moveTo(x1, y);
    ctx.lineTo(x2, y);
    ctx.quadraticCurveTo(x3, y, x3, y1);
    ctx.lineTo(x3, y2);
    ctx.quadraticCurveTo(x3, y3, x2, y3);
    ctx.lineTo(x1, y3);
    ctx.quadraticCurveTo(x, y3, x, y2);
    ctx.lineTo(x, y1);
    ctx.quadraticCurveTo(x, y, x1, y);
    ctx.closePath();

body background-color: ivory; 
canvasborder:1px solid red;

<canvas id="canvas" width=300 height=300></canvas>

【讨论】：

不需要二次曲线和直线，只用四条弧线——更简单更高效。此外，问题 1 (1.) 似乎没有得到解决。

弧（根据定义）更简单，但二次曲线更灵活。就个人而言，除了最简单的用途外，我对 qCurves 的所有“了解”都比圆弧好——它与我产生共鸣，定义起点 + 终点，中心控制点定义曲线。弧线效率更高一些，但除了体积情况外，可能还不足以提及。是的，没有解决问题 1.1。 :-/ 获得入站角度很容易，但我怀疑提问者需要的不仅仅是这个。我希望 OP 提供后续信息/问题。顺便说一句，你的 dup 问题上最大的投票者使用 qcurves：-p

当然，但无论如何，在弧选项出现之前一年多就已经回答了（在投票中排名第二，超过两年前接受的答案），重点是选择为重复，因为它已经回答了 OPs 2. 问题（第一个问题本身可能应该是一个问题，但不能选择两个答案作为重复和/或不清楚的问题..）。顺便说一句，动画也是一个体积案例。仅基于此问题的标题，我不确定我们是否会对此提供更多详细信息..