①

什么是贝塞尔曲线？

在数学的数值分析领域中，贝济埃曲线（英语：Bézier curve，亦作“贝塞尔”）是计算机图形学中相当重要的参数曲线。更高维度的广泛化贝济埃曲线就称作贝济埃曲面，其中贝济埃三角是一种特殊的实例。

贝济埃曲线于1962年，由法国工程师皮埃尔·贝济埃（Pierre Bézier）所广泛发表，他运用贝济埃曲线来为汽车的主体进行设计。贝济埃曲线最初由Paul de Casteljau于1959年运用de Casteljau算法开发，以稳定数值的方法求出贝济埃曲线。

Photoshop的钢笔工具  GO！

贝塞尔曲线参考书 GO！

②

原文地址：http://www.cnblogs.com/duanhuajian/archive/2012/10/15/2725096.html

二次贝塞尔曲线

　　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>

代码效果：

三次贝塞尔曲线

　　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>

代码效果图：

③

原文地址：http://www.cnblogs.com/iamzhanglei/p/6169298.html
HTML5 Canvas玩转酷炫大波浪进度图

如上图所见，本文就是要实现上面那种效果。
由于最近AlloyTouch要写一个下拉刷新的酷炫loading效果。所以首选大波浪进度图。
首先要封装一下大波浪图片进度组件。基本的原理是利用Canvas绘制矢量图和图片素材合成出波浪特效。

本文的代码你可以在这里https://github.com/AlloyTeam/AlloyTouch/blob/master/refresh/wave/image_wave.html找到。

④

二次贝塞尔曲线

<!DOCTYPE html>

<html>

<style type="text/css">

canvas { border: 1px solid black;

width: ;

height: ;

}

</style>

<head>

<meta charset="utf-8">

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

<link rel="stylesheet" type="text/css">

</head>

<body onload="draw();">

<canvas id="tutorial" width="500" height="500">

</canvas>

<script type="application/javascript">

function draw(){

var canvas = document.getElementById('tutorial');//为 <canvas> 元素得到DOM对象

if (canvas.getContext){ //一旦有了元素对象，你可以通过使用它的getContext() 方法来访问绘画上下文。

var ctx = canvas.getContext('2d'); //这个方法是用来获得渲染上下文和它的绘画功能

//二次贝塞尔曲线

ctx.beginPath();

ctx.moveTo(75,25);

ctx.quadraticCurveTo(25,25,25,62.5);

ctx.quadraticCurveTo(25,100,50,100);

ctx.quadraticCurveTo(50,120,30,125);

ctx.quadraticCurveTo(60,120,65,100);

ctx.quadraticCurveTo(125,100,125,62.5);

cxt.quadraticCurveTo(125,25,75,25);

ctx.stroke();

ctx.closePath();

}

}

</script>

</body>

</html>

渲染对话气泡：

三次贝塞尔曲线

<!DOCTYPE html>

<html>

<style type="text/css">

      canvas { border: 1px solid black;

               width: ;

               height: ;

      }

</style>

<head>

  <meta charset="utf-8">

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

  <link rel="stylesheet" type="text/css">

</head>

<body onload="draw();">

  <canvas id="tutorial" width="500" height="500">

  </canvas>

<script type="application/javascript">

  function draw(){

       var canvas = document.getElementById('tutorial');//为 <canvas> 元素得到DOM对象

       if (canvas.getContext){   //一旦有了元素对象，你可以通过使用它的getContext() 方法来访问绘画上下文。

         var ctx = canvas.getContext('2d'); //这个方法是用来获得渲染上下文和它的绘画功能

         //三次贝塞尔曲线

         ctx.beginPath();

         ctx.moveTo(75,40);

         ctx.bezierCurveTo(75,37,70,25,50,25);

         ctx.bezierCurveTo(20,25,20,62.5,20,62.5);

         ctx.bezierCurveTo(20,80,40,102,75,120);

         ctx.bezierCurveTo(110,102,130,80,130,62.5);

         ctx.bezierCurveTo(130,62.5,130,25,100,25);

         ctx.bezierCurveTo(85,25,75,37,75,40);

         ctx.fill();

       }

     }

</script>

</body>

</html>

绘制心形：

Canvas中绘制贝塞尔曲线的更多相关文章

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

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

  2. canvas绘制贝塞尔曲线

    原文:canvas绘制贝塞尔曲线 1.绘制二次方贝塞尔曲线 quadraticCurveTo(cp1x,cp1y,x,y); 其中参数cp1x和cp1y是控制点的坐标,x和y是终点坐标 数学公式表示如 ...

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

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

  4. NGUI研究院之在Unity中使用贝塞尔曲线（六）[转]

    鼎鼎大名的贝塞尔曲线相信大家都耳熟能详.这两天因为工作的原因需要将贝塞尔曲线加在工程中,那么MOMO迅速的研究了一下成果就分享给大家了哦.贝塞尔曲线的原理是由两个点构成的任意角度的曲线,这两个点一个是 ...

  5. Unity3d游戏中自定义贝塞尔曲线编辑器[转]

    关于贝塞尔曲线曲线我们再前面的文章提到过<Unity 教程之-在Unity3d中使用贝塞尔曲线>,那么本篇文章我们来深入学习下,并自定义实现贝塞尔曲线编辑器,贝塞尔曲线是最基本的曲线,一般 ...

  6. 在Unity中使用贝塞尔曲线(转)

    鼎鼎大名的贝塞尔曲线相信大家都耳熟能详.这两天因为工作的原因需要将贝塞尔曲线加在工程中,那么MOMO迅速的研究了一下成果就分享给大家了哦.贝塞尔曲线的原理是由两个点构成的任意角度的曲线,这两个点一个是 ...

  7. NGUI研究之在Unity中使用贝塞尔曲线

    鼎鼎大名的贝塞尔曲线相信大家都耳熟能详.这两天由于工作的原因须要将贝塞尔曲线加在project中.那么我迅速的研究了一下成果就分享给大家了哦.贝塞尔曲线的原理是由两个点构成的随意角度的曲线,这两个点一 ...

  8. 【Unity3d游戏开发】游戏中的贝塞尔曲线以及其在Unity中的实现

    RT,马三最近在参与一款足球游戏的开发,其中涉及到足球的各种运动轨迹和路径,比如射门的轨迹,高吊球,香蕉球的轨迹.最早的版本中马三是使用物理引擎加力的方式实现的足球各种运动,后来的版本中使用了根据物理 ...

  9. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

随机推荐

  1. springboo+nginx测试反向代理02

    本节对nginx配置方面会略微研究~~ 1:切换到 /opt/nginx-1.8.1/conf 目录,将nginx.conf文件拷贝到 /myprojects/nginx 目录下 2:切换到/opt/ ...

  2. 写一个python 爬虫爬取百度电影并存入mysql中

    目标是利用python爬取百度搜索的电影 在类型 地区 年代各个标签下 电影的名字 评分 和图片连接 以及 电影连接 首先我们先在mysql中建表 create table liubo4( id in ...

  3. java 文件目录树

    1. 目标格式,使用tree命令时,目录树格式如下. public class TreeTest { public static void main(String[] args) { File roo ...

  4. 【Git】Git提交代码的正确姿势

    按此步骤基本没问题,中间有conflict,需要手动解决. 1.git stash 2.git pull 3.git stash pop 4.git add --xxx 5.git commit -m ...

  5. <!特别的一天>

    <!DOCTYPE html> <html> <head> <meta charset="gb2312/"> <title&g ...

  6. 在GNU/Linux下制作Windows 10安装U盘

    今年春节回家期间,我需要将家里的一台安装了Debian Stretch的ZaReason笔记本电脑更换为Windows 10系统,好让爸妈从老台式机上的XP系统升级到新的平台上来.回家前,小仙女已在微 ...

  7. Mybatis Mapper接口是如何找到实现类的-源码分析

    KeyWords: Mybatis 原理,源码,Mybatis Mapper 接口实现类,代理模式,动态代理,Java动态代理,Proxy.newProxyInstance,Mapper 映射,Map ...

  8. 基于Filebeat+Kafka+Flink仿天猫双11实时交易额

    1. 写在前面 在大数据实时计算方向,天猫双11的实时交易额是最具权威性的,当然技术架构也是相当复杂的,不是本篇博客的简单实现,因为天猫双11的数据是多维度多系统,实时粒度更微小的.当然在技术的总体架 ...

  9. 网站发布出现“未能找到路径“path\bin\roslyn\csc.exe”....“和拒绝访问的解决办法

    最近在2017上新建了一个MVC项目,发布是出现了各种奇怪的问题,其中一个错误是: 未能找到路径“path\bin\roslyn\csc.exe”.... 经过网上搜寻资料发现罪魁祸首就是NUGET里 ...

  10. UOJ#450. 【集训队作业2018】复读机 排列组合 生成函数 单位根反演

    原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ450.html 题解 首先有一个东西叫做“单位根反演”,它在 FFT 的时候用到过: $$\frac 1 ...