python绘制贝塞尔曲线_Canvas中绘制贝塞尔曲线

①

什么是贝塞尔曲线？

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

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

Photoshop的钢笔工具  GO！

贝塞尔曲线参考书 GO！

②

二次贝塞尔曲线

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

数学公式表示如下：

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

代码实例：

canvas直线

body, h1{margin:0;}

canvas{margin: 20px;}

二次贝塞尔曲线

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();

}

代码效果：

三次贝塞尔曲线

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方向的“长度有多长”。

代码实例：

canvas直线

body, h1{margin:0;}

canvas{margin: 20px; }

三次贝塞尔曲线

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();

}

代码效果图：

③

如上图所见，本文就是要实现上面那种效果。

由于最近AlloyTouch要写一个下拉刷新的酷炫loading效果。所以首选大波浪进度图。

首先要封装一下大波浪图片进度组件。基本的原理是利用Canvas绘制矢量图和图片素材合成出波浪特效。

④

二次贝塞尔曲线

canvas { border: 1px solid black;

width: ;

height: ;

}

二次贝塞尔曲线

function draw(){

var canvas = document.getElementById('tutorial');//为 元素得到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();

}

}

渲染对话气泡：

三次贝塞尔曲线

canvas { border: 1px solid black;

width: ;

height: ;

}

三次贝塞尔曲线

function draw(){

var canvas = document.getElementById('tutorial');//为 元素得到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();

}

}

绘制心形：

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

查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: /p>

canvas绘制贝塞尔曲线

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

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

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

NGUI研究院之在Unity中使用贝塞尔曲线(六)[转]

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

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

关于贝塞尔曲线曲线我们再前面的文章提到过,那么本篇文章我们来深入学习下,并自定义实现贝塞尔曲线编辑器,贝塞尔曲线是最基本的曲线,一般 ...

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

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

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

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

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

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

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

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

随机推荐

MySql UDF 调用外部程序和系统命令

1.mysql利用mysqludf的一个mysql插件可以实现调用外部程序和系统命令 下载lib_mysqludf_sys程序:https://github.com/mysqludf/lib_mysq ...

AJAX文件上传实践与分析，带HTML5文件上传API。

对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...

[CareerCup] 10.7 Simplified Search Engine 简单的搜索引擎

10.7 Imagine a web server for a simplified search engine. This system has 100 machines to respond to ...

iOS 常见 Crash 及解决方案

一.访问了一个已经被释放的对象 在不使用 ARC 的时候,内存要自己管理,这时重复或过早释放都有可能导致 Crash. 例子 NSObject * aObj = [[NSObject alloc] i ...

oracle10~11g在centos5~6版本上安装整体总结如下

1,oracle10g在centos/RedHat5~6主要的安装步骤,我主要记录核心的,别的在此就不多说了,都是些linux基本维护指令,关闭iptables,selinux,或是放行相应的端口,本 ...

安装SQL Server提示“重叠的IO操作正在进行”解决

单位新做了一个虚机.打算部署一套.Net SQL 的系统 系统是Server 2008 R2,机器除了系统,其它软件都没有. 所以须要安装SQL Server啊,.Net环境啊.配置IIS== 恰巧的 ...

UVALive 7077 Little Zu Chongzhi's Triangles (有序序列和三角形的关系)

这个题--我上来就给读错了,我以为最后是一个三角形,一条边可以由多个小棒组成,所以想到了状态压缩各种各样的东西,最后成功了--结果发现样例过不了,三条黑线就在我的脑袋上挂着,改正了以后我发现N非常小, ...

Heartbeat+DRBD+MySQL高可用方案【转】

转自Heartbeat+DRBD+MySQL高可用方案 - yayun - 博客园 http://www.cnblogs.com/gomysql/p/3674030.html 1.方案简介 本方案采用 ...

laravel 表单验证 Exists 规则的基本使用方法

public function rules(){ return [ 'm_pushing_frequency_level_id' => 'integer|required|exists:m_pu ...

mysql的报错

这个错误是因为mysql的进程错误关闭导致的,我们需要把/var/lib/mysql/mysql.sock文件删除或者改名,之后再重启就ok