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

使用canvas绘制二次曲线语法

<script>

    cntx.quadraticCurveTo(controlX, controlY, endX, endY);

</script>

使用canvas绘制二次曲线示例

<html>

  <head>

    <style>

      body {

        margin: 0px;

        padding: 0px;

      }

    </style>

    <script>

        window.onload = function () {

            var canvas = document.getElementById("mycanvas");

            var cntx = canvas.getcntx("2d");

 

            cntx.beginPath();

            cntx.moveTo(188, 150);

            cntx.quadraticCurveTo(288, 0, 388, 150);

            cntx.lineWidth = 10;

            //line color

            cntx.strokeStyle = "black";

            cntx.stroke();

        };

 

    </script>

  </head>

  <body>

    <canvas id="mycanvas" width="500" height="250"></canvas>

  </body>

</html>

HTML5中的Canvas二次曲线

画布二次曲线在Html5是一个画布工具。主要用于定义元素的上下文点、控制点和结束点。对于它，我们在Html文档的样式标记中使用QuadraticCurveTo（）方法。

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

在本文中，我将在HTML5中解释Canvas二次曲线。

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

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

在HTML5中如何使用Canvas进行旋转变换→

使用canvas绘制二次曲线语法

使用canvas绘制二次曲线示例

HTML5中的Canvas二次曲线

目录