HTML5实战—canvas绘图之贝塞尔曲线
生活随笔
收集整理的這篇文章主要介紹了
HTML5实战—canvas绘图之贝塞尔曲线
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
原文地址：http://www.cnblogs.com/duanhuajian/archive/2012/10/15/2725096.html
1、二次貝塞爾曲線
quadraticCurveTo(cpx,cpy,x,y) //cpx，cpy表示控制點(diǎn)的坐標(biāo),?x，y表示終點(diǎn)坐標(biāo)；
數(shù)學(xué)公式表示如下：
二次方貝茲曲線的路徑由給定點(diǎn)P0、P1、P2的函數(shù)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 οnlοad="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');//繪制起始點(diǎn)、控制點(diǎn)、終點(diǎn) 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表示第一個(gè)控制點(diǎn)的坐標(biāo),?cp2x，cp2y表示第二個(gè)控制點(diǎn)的坐標(biāo),?x，y表示終點(diǎn)的坐標(biāo)；
數(shù)學(xué)公式表示如下：
P0、P1、P2、P3四個(gè)點(diǎn)在平面或在三維空間中定義了三次方貝茲曲線。曲線起始于P0走向P1，并從P2的方向來到P3。一般不會(huì)經(jīng)過P1或P2；這兩個(gè)點(diǎn)只是在那里提供方向資訊。P0和P1之間的間距，決定了曲線在轉(zhuǎn)而趨進(jìn)P3之前，走向P2方向的“長(zhǎng)度有多長(zhǎng)”。
<!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 οnlοad="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'); //繪制起始點(diǎn)、控制點(diǎn)、終點(diǎn) 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>代碼效果圖：
總結(jié)
以上是生活随笔為你收集整理的HTML5实战—canvas绘图之贝塞尔曲线的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Jquery判断元素是否隐藏：displ
- 下一篇： 解决IDM“警告：您在以管理员身份运行I