Canvas中繪製貝塞爾曲線
①
什麼是貝塞爾曲線?
在數學的數值分析領域中,貝濟埃曲線(英語: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>
繪製心形: