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. 预处理器 Less 的十个语法

    Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. 不过浏览器只能识别 CSS 语言,所以 Les ...

  2. jsp+servlet实战项目

    第一步:新建maven项目,项目中添加dao,entity,service,servlet,util包第二步:导入依赖 第三步:数据库建表 第四步:entity实体包(疯转) 第五步:在util工具包 ...

  3. ZS Shuffles Cards 题解

    ZS Shuffles Cards 题解 我们把每一次抽一些数字牌再抽到 joker 视作一局游戏. 每局期望轮数 首先考虑 \(f_i\) 表示每一局游戏抽出 \(i\) 张牌的概率. 那么就是先抽 ...

  4. 《CTFshow-Web入门》02. Web 11~20

    @ 目录 web11 题解 原理 web12 题解 web13 题解 web14 题解 web15 题解 web16 题解 原理 web17 题解 web18 题解 原理 web19 题解 web20 ...

  5. tomcat配置域名绑定项目

    有时候我们需要根据访问的不同域名,对应tomcat中不同的项目例如:一个网站同时做了两套,pc版和手机版.手机版对应的域名是m.we-going.com,就需要在tomcat配置文件中加入以下代码:& ...

  6. Java实践项目 - 购物车模块

    Smiling & Weeping ----世界上美好的东西不太多,立秋傍晚从河对岸吹来的风, 加入购物车 1.数据创建--创建t_cart CREATE TABLE t_cart( cid ...

  7. 带宽优化新思路：RoCE网卡聚合实现X2增长

    本文分享自华为云社区<2个RoCE网卡Bond聚合,实现带宽X2>,作者: tsjsdbd . 我们知道操作系统里面,可以将2个实际的物理网卡,合体形成一个"逻辑网卡" ...

  8. ChatGPT API Transition Guide

    ChatGPT API Transition Guide How to get started Written by Joshua J.. Updated over a week ago Prompt ...

  9. PKCS#11：密码设备与应用程序的密码学接口

    密码学在信息安全中扮演着至关重要的角色.为了保护敏感信息.数字身份和网络通信的安全性,密码设备(如硬件安全模块HSM)与应用程序之间的安全通信和互操作性变得至关重要.PKCS#11(Public-Ke ...

  10. client-go实战之八:更新资源时的冲突错误处理

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 本文是<client-go实战> ...