绘制画布形状

Question

我需要绘制以下画布形状。我无法弄清楚如何制作它。我尝试使用lineTo()，但我很难定位这些线段。而且它没有曲线形状。

<canvas>大小应等于600x450。提前谢谢。

Answer 1

您可以使用方法bezierCurveTo()：

  

Canvas 2D API的CanvasRenderingContext2D.bezierCurveTo（）方法将三维Bézier曲线添加到路径中。它需要三点。前两点是控制点，第三点是终点。起点是当前路径中的最后一个点，可以在创建Bézier曲线之前使用moveTo（）更改。

这是一个基本的例子：

const canvas = document.getElementById("opCanvas");
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.lineWidth =5;
ctx.strokeStyle ='orange';
ctx.moveTo(150,0);
ctx.bezierCurveTo(0,125,300,175,150,300);
ctx.stroke();

<canvas id ="opCanvas" width="600" height ="450">

以下是帮助工具：http://www.victoriakirst.com/beziertool/

Answer 2

使用bezier曲线作为 Cezar Augusto 演示可以与画布2D API的短划线设置结合使用。 setLineDash(array)从数组参数创建一个虚线。 lineDashOffset是开始破折号和间隙序列的偏移量

    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    var w = canvas.width = innerWidth - 20;
    var h = canvas.height = innerHeight - 20;
    document.body.appendChild(canvas)
    ctx.setLineDash([14, 16]);
    ctx.lineDashOffset = 2;
    ctx.lineWidth = 4;
    ctx.setTransform(1,0,0,1,0,h/2);
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.bezierCurveTo(w / 2, h, w / 2, -h, w, 0);
    ctx.stroke();    

setLineDash获取一个数字数组，表示短划线然后空格的像素数，依此类推。如果数组长度为奇数，则重复在短划线开始时重复。