html - html5画布拉伸矩形的边

Question

是否有可能我可以拉伸矩形的一侧并将其形状从直线更改为其他形状，如弧形或通过从中心拉伸它来改变形状，如下所示

Answer 1

您可能不想按照其他人的建议使用弧线，因为弧线只会给您提供弧线。更好的方法是将矩形（4 条边）表示为 4 个立方贝塞尔曲线。具有与起点和终点共线的控制点的三次贝塞尔曲线将产生一条直线，因此您仍然可以表示一个正常的矩形。然后，当您想将两侧拉伸成曲线时，您只需根据您想要的曲线将控制点向外、向内、向上或向下移动。快速了解贝塞尔曲线可能会有所帮助。

我将制作一张图片来更好地说明这一点，并在几分钟内将其包含在内。

因此，当我们绘制矩形时，代码将如下所示：

ctx.moveTo(p1.x,p1.y);
ctx.bezierCurveTo(cp1.x,cp1.y,cp2.x,cp2.y,p2.x,p2.y);
ctx.bezierCurveTo(cp3.x,cp3.y,cp4.x,cp4.y,p3.x,p3.y);
ctx.bezierCurveTo(cp5.x,cp5.y,cp6.x,cp6.y,p4.x,p4.y);
ctx.bezierCurveTo(cp7.x,cp7.y,cp8.x,cp8.y,p1.x,p1.y);

Answer 2

您可以使用 quadraticCurveTo 函数，它有 4 个参数，并且非常易于使用，请查看示例

http://jsfiddle.net/55Ws3/

<canvas width="800" height="800" id="world" style="border: 1px solid red;"><p class="noCanvas">You need a <a href="#">modern browser</a> to view this.</p></canvas>


var canvasElement = document.getElementById('world');
// Always check for properties and methods, to make sure your code doesn't break 
// in other browsers.
if (canvasElement && canvasElement.getContext) {
    // Get the 2d canvasContext.
    // Remember: you can only initialize one canvasContext per element.
    var canvasContext = canvasElement.getContext('2d');
    if (canvasContext) {
        canvasContext.beginPath();
        canvasContext.moveTo(100, 200);
        canvasContext.lineTo(200, 200);
        canvasContext.quadraticCurveTo(325, 250, 200, 300);
        canvasContext.lineTo(100, 300);
        canvasContext.lineTo(100, 200);
        canvasContext.fillStyle = 'red';
        canvasContext.strokeStyle = 'red';
        canvasContext.lineWidth = 2;
        canvasContext.fill();
        canvasContext.stroke();
        canvasContext.closePath();
    }
}

Answer 3

您无法通过简单地绘制一个矩形来实现这一点。但是，您可以绘制三条线并为第四条边绘制弧线。这里有一个关于context.arc().