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. 检测文件的格式——chardet模块

    f3 = open(file=path,mode='rb') data = f3.read() # print(data) f3.close() result = chardet.detect(dat ...

  2. Jmeter："An error occurred: Can't connect to X11 window server using 'lacalhost:12.0' as the value of the display variable." 解决办法

    做各种不同项目的性能测试,都需要在项目本地压测服务器配置jmeter,需要时还要调出jmeter图形化界面来调试jmeter脚本. 标题中的问题遇过多次,这次做个记录. 1. 启动jmeter报错 在 ...

  3. Web攻防--xxe实体注入

    web攻防--xxe实体注入 漏洞简介 XML 外部实体注入(也称为 XXE)是一种 Web 安全漏洞,允许攻击者干扰应用程序对 XML 数据的处理.它通常允许攻击者查看应用程序服务器文件系统上的文件 ...

  4. salesforce零基础学习（一百三十）Report 学习进阶篇

    本篇参考: https://help.salesforce.com/s/articleView?id=sf.reports_summary_functions_about.htm&type=5 ...

  5. CF-1860C Game on Permutation题解

    题意:在一条数轴上,Alice可以跳到在你所在点前面且值比当前所在点小的点.每回合可以向任意符合要求的点跳一次.当轮到Alice的回合同时不存在符合要求的点,Alice就赢了.Alice可以选择一个点 ...

  6. Mybatis插件功能

    1 插件的作用 在Mybatis执行SQL的生命周期中,会使用插件进行埋点,主要包括Executor.StatementHandler.ParameterHandler和ResultSetHandle ...

  7. Vmware中的centos7突然连接不上网络了，网络适配器采用的是NAT模式，解决办法？

    进入Windows操作系统,然后右键点击我们的电脑,进入到管理界面 计算机-> 管理->服务和应用程序->服务,找到如下服务进程 VMware DHCP Service, VMwar ...

  8. react移动端上拉加载更多组件

    在开发移动端react项目中,遇到了上拉加载更多数据的分页功能,自己封装了一个组件,供大家参考,写的不好还请多多指教! import React, {Component} from 'react'; ...

  9. 8.2 BeingDebugged

    BeingDebugged 是Windows系统PEB结构体中的一个成员,它是一个标志位,用于标识当前进程是否正在被调试.BeingDebugged的值为0表示当前进程未被调试,值为1表示当前进程正在 ...

  10. Vue框架快速上手

    Vue基础 vue指令 内容绑定 v-text 设置标签的内容一般通过双大括号的表达式{{ }}去替换内容 {{ hello }} v-html 与v-text类似区别在于html中的结构会被解析为标 ...