1、二次贝塞尔曲线

　　quadraticCurveTo(cpx,cpy,x,y)　　//cpx，cpy表示控制点的坐标, x，y表示终点坐标；

数学公式表示如下：

二次方贝兹曲线的路径由给定点P0、P1、P2的函数B（t）追踪：

代码实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>canvas直线</title>

<meta name="Keywords" content="">

<meta name="author" content="@my_programmer">

<style type="text/css">

    body, h1{margin:0;}

    canvas{margin: 20px;}

</style>

</head>

<body onload="draw()">

    <h1>二次贝塞尔曲线</h1>

    <canvas id="canvas" width=200 height=200 style="border: 1px solid #ccc;"></canvas>

<script>

    function draw() {

        var canvas=document.getElementById('canvas');

        var context=canvas.getContext('2d');

         //绘制起始点、控制点、终点

          context.beginPath();

          context.moveTo(20,170);

          context.lineTo(130,40);

          context.lineTo(180,150);

          context.stroke();            

          //绘制2次贝塞尔曲线

          context.beginPath();

          context.moveTo(20,170);

          context.quadraticCurveTo(130,40,180,150);

          context.strokeStyle = "red";

          context.stroke();

}

</script>

</body>

</html>

代码效果：

2、三次贝塞尔曲线

　　bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)　　//cp1x，cp1y表示第一个控制点的坐标, cp2x，cp2y表示第二个控制点的坐标, x，y表示终点的坐标；

数学公式表示如下：

P0、P1、P2、P3四个点在平面或在三维空间中定义了三次方贝兹曲线。曲线起始于P0走向P1，并从P2的方向来到P3。一般不会经过P1或P2；这两个点只是在那里提供方向资讯。P0和P1之间的间距，决定了曲线在转而趋进P3之前，走向P2方向的“长度有多长”。

代码实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>canvas直线</title>

<meta name="Keywords" content="">

<meta name="Description" content="">

<style type="text/css">

    body, h1{margin:0;}

    canvas{margin: 20px; }

</style>

</head>

<body onload="draw()">

    <h1>三次贝塞尔曲线</h1>

    <canvas id="canvas" width=200 height=200 style="border: 1px solid #ccc;"></canvas>

<script>

    function draw() {

        var canvas=document.getElementById('canvas');

        var context=canvas.getContext('2d');

       //绘制起始点、控制点、终点

       context.beginPath();

       context.moveTo(25,175);

       context.lineTo(60,80);

       context.lineTo(150,30);

       context.lineTo(170,150);

       context.stroke();  

       //绘制3次贝塞尔曲线

       context.beginPath();

       context.moveTo(25,175);

       context.bezierCurveTo(60,80,150,30,170,150);

       context.strokeStyle = "red";

       context.stroke();

}

</script>

</body>

</html>

代码效果图：

【作者】：@挨踢前端
【出处】：https://www.cnblogs.com/duanhuajian/archive/2012/10/15/2725096.html
【声明】：所有博文标题后加（share）的表示收集的他人优秀文章，其余的则为原创。欢迎转载，但请在显要位置显示本文链接，并保留本段声明，否则追究法律责任，谢谢！

HTML5实战—canvas绘图之贝塞尔曲线的更多相关文章

  1. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  2. 基于canvas二次贝塞尔曲线绘制鲜花

    canvas中二次贝塞尔曲线参数说明: cp1x:控制点1横坐标 cp1y:控制点1纵坐标 x: 结束点1横坐标 y:结束点1纵坐标 cp2x:控制点2横坐标 cp2y:控制点2纵坐标 z:结束点2横 ...

  3. Canvas中绘制贝塞尔曲线

    ① 什么是贝塞尔曲线? 在数学的数值分析领域中,贝济埃曲线(英语:Bézier curve,亦作“贝塞尔”)是计算机图形学中相当重要的参数曲线.更高维度的广泛化贝济埃曲线就称作贝济埃曲面,其中贝济埃三 ...

  4. HTML5之Canvas绘图——使用Canvas绘制图形的基本教程

    原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  5. HTML5之Canvas绘图(一) ——基础篇

    HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是 ...

  6. 【HTML5】Canvas绘图详解-1

    ----->Canvas绘制基础 1,线条绘制 1-1,线条组成的图形和beginPath 案例:绘制由不同颜色的线条组成的图案 1-2,多边形的填充和closePath 案例:绘制封闭具有填充 ...

  7. HTML5之Canvas绘图实例——饼状图

    实现饼状分布画图(如下):调试环境:Firefox

  8. HTML5之Canvas绘图实例——曲线图

    实现正弦.余弦和正切函数画图(如下图):调试环境:Firefox

  9. HTML5七巧板canvas绘图（复习）

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  10. HTML5七巧板canvas绘图

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. webpack配置文件的分离

    配置文件的分离 目的就是让开发环境, 生产环境,测试环境的配置分隔开 步骤一: 在项目根目录下创建一个 build 文件夹专门用来存放配置文件,再创建三个js文件, base.config.js 文件 ...

  2. msvc++工程之vs版本升级及工程目录规范

    为什么要升级msvc++工程版本 对msvc++工程进行vs版本升级,一方面是可以使用较新的C++标准及对64位更好的支持. 首先你需要对msvc++ project文件有一定的了解,主要是vcxpr ...

  3. CVE-2023-2825-GitLab目录穿越poc

    Gitlab CVE-2023-2825 目录穿越漏洞 前言 昨天 GitLab 出了一个版本目录穿越漏洞(CVE-2023-2825),可以任意读取文件.当时我进行了黑盒测试并复现了该漏洞. &qu ...

  4. ESP32C3 LEDC_PWM

    LEDC_PWM    LED 控制器 (LEDC) 主要用于控制 LED,也可产生 PWM 信号用于其他设备的控制,ESP32C3有 6 路通道.设置 LEDC 通道分三步完成.与 ESP32 不同 ...

  5. ArcMap中矢量数据修改标注Label的方法

      本文介绍在ArcMap软件中,修改图层标签(Label)所显示字段与具体显示内容的方法.   在之前的文章中,我们看到了ArcMap中修改图层标签的重要性:可是,如何自定义图层的标签内容呢?    ...

  6. 在CentOS 8上安装Xrdp远程桌面服务

    如何在CentOS 8上安装Xrdp远程桌面服务 写在前面 Xrdp是Microsoft远程桌面协议(RDP)的开源实现,可让您以图形方式控制远程系统.使用RDP,您可以登录到远程计算机并创建真实的桌 ...

  7. DEDEBIZ禁止发布重复标题文章的方法

    修改文件位置 /admin/article_add.php 找到 if (empty($click)) $click = ($cfg_arc_click == '-1' ? mt_rand(1000, ...

  8. Eclipse 创建OSGI项目并调试

    File->new->Plug-in Project

  9. python3利用smtplib发送、抄送邮件并附带附件

    python3利用smtplib发送.抄送邮件并附带附件 1. 导包 import smtplib from email.mime.text import MIMEText from email.mi ...

  10. c语言代码练习16

    //计算a,b间的最大值#define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> int ayue( int a, int b) { if ...