如何在html5中使用canvas 绘制bezier曲线-之路教程

在HTML5中绘制Canvas Bezier曲线

Bezier曲线是canvas工具。
这主要是用于定义的上下文点，两个控制点和元素的结束点。
在HTML文档中使用BeziercurVeto()方法在样式标记中。
Bezier曲线提供了两个控制点，我们可以设计更复杂的曲线。

HTML5 canvas 绘制bezier曲线语法

<script>

    context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);

</script>

如何在html5中使用canvas 绘制bezier曲线

HTML5 canvas 绘制bezier曲线示例

<html>

<head>

    <style>

        body

        {

            margin: 0px;

            padding: 0px;

        }

    </style>

    <script>

        window.onload = function () {

            var cvs = document.getElementById("cnvs");

            var cntx = cvs.getContext("2d");

 

            cntx.beginPath();

            cntx.moveTo(188, 130);

            cntx.bezierCurveTo(140, 10, 388, 10, 388, 170);

            cntx.lineWidth = 10;

            cntx.strokeStyle = "brown";

            cntx.stroke();

        };

 

    </script>

</head>

<body>

    <canvas id="cnvs" width="500" height="150"></canvas>

</body>

</html>

日期：2020-04-11 23:04:07 来源：oir作者：oir

←如何在html5中使用canvas arc

在HTML5中如何使用Canvas自定义变换→

在HTML5中绘制Canvas Bezier曲线

HTML5 canvas 绘制bezier曲线语法

HTML5 canvas 绘制bezier曲线示例

目录