什么是贝塞尔曲线?

在数学的数值分析领域中,贝济埃曲线(英语: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表示终点坐标;

数学公式表示如下:

二次方贝兹曲线的路径由给定点P0P1P2的函数Bt)追踪:

代码实例:

<!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表示终点的坐标;

数学公式表示如下:

P0P1P2P3四个点在平面或在三维空间中定义了三次方贝兹曲线。曲线起始于P0走向P1,并从P2的方向来到P3。一般不会经过P1P2;这两个点只是在那里提供方向资讯。P0P1之间的间距,决定了曲线在转而趋进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. CentOS Android Studio桌面图标的创建

    1.切换到root用户,在桌面上创建Android.Studio.desktop,如下: [Desktop Entry] Name=Android Studio Comment=Android Stu ...

  2. docker简单介绍----docker仓库的应用

    docker hub:主要用来存储docker镜像的仓库 docker默认提供了一个docker仓库,我们也可以自建私有仓库或者使用第三方的docker仓库来pull或者push镜像 这里我们以阿里云 ...

  3. Centos 7部署docker

    master安装: 安装zookeeper -openjdk java--openjdk-headless rpm -i packages/mesosphere-zookeeper--.centos7 ...

  4. 【spark】dataframe常见操作

    spark dataframe派生于RDD类,但是提供了非常强大的数据操作功能.当然主要对类SQL的支持. 在实际工作中会遇到这样的情况,主要是会进行两个数据集的筛选.合并,重新入库. 首先加载数据集 ...

  5. python单元测试框架unittest总结

    unittest.TestCase:TestCase类,所有测试用例类继承的基本类. class BaiduTest(unittest.TestCase): TestCase类的属性如下: setUp ...

  6. python设计模式---行为型之观察者模式

    比较常用咯~~ from django.test import TestCase from abc import ABCMeta, abstractmethod # 行为型设计模式---观察者模式 c ...

  7. js属性对象的propertyIsEnumerable方法

    定义 每个对象都有一个propertyIsEnumerable()方法.此方法返回一个布尔值,表明指定的属性是否是可枚举. This method can determine whether the ...

  8. UML绘图工具——PlantUML

    1 简介 PlantUML是一个开源项目,支持通过简单直观的语言来定义以下UML图. 时序图 用例图 类图 活动图 组件图 状态图 对象图 部署图 定时图 支持生成图片格式有: PNG SVG LaT ...

  9. IIS+Tomcat功能iis端口2

    之前写过IIS桥接Tomcat是通过isapi_redirect.dll,组件方式实现共用端口的,但是在Windows2012服务器 iis8.0版本中,配置完成后没有效果,比较抓狂,分析发现如下信息 ...

  10. JS中5种经典继承方式

    继承 JS中继承的概念: 通过[某种方式]让一个对象可以访问到另一个对象中的属性和方法,我们把这种方式称之为继承 并不是所谓的xxx extends yyy 为什么要使用继承? 有些对象会有方法(动作 ...