HAML5 Canvas 数学问题

Question

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

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

问题一：我必须在拐角处设置一个拐角半径，如何在 canvas 上绘制它？这是一个例子：

希望有人能帮忙？

Answer 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; }
canvas{border:1px solid red;}

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

HAML5 Canvas 数学问题

HAML5 Canvas problems with matcmatics

html

javascript

canvas