2. 程式人生 > >Canvas中繪製貝塞爾曲線

Canvas中繪製貝塞爾曲線

阿新 • • 發佈：2018-12-04

①

什麼是貝塞爾曲線？

    在數學的數值分析領域中，貝濟埃曲線（英語：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）追蹤：

\mathbf{B}(t) = (1 - t)^{2}\mathbf{P}_0 + 2t(1 - t)\mathbf{P}_1 + t^{2}\mathbf{P}_2 \mbox{ , } t \in [0,1]

程式碼例項：

複製程式碼 
<!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方向的“長度有多長”。

\mathbf{B}(t)=\mathbf{P}_0(1-t)^3+3\mathbf{P}_1t(1-t)^2+3\mathbf{P}_2t^2(1-t)+\mathbf{P}_3t^3 \mbox{ , } t \in [0,1]

程式碼例項：

複製程式碼 
<!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中繪製貝塞爾曲線

① 什麼是貝塞爾曲線？     在數學的數值分析領域中，貝濟埃曲線（英語：Bézier curve，亦作“貝塞爾”）是計算機圖形學中相當重要的引數曲線。更高維度的廣泛化貝濟埃曲線就稱作貝濟埃曲面，其中貝濟埃三角是一種特殊的例項。     貝濟埃曲線於1962年，由

Unity遊戲中使用貝塞爾曲線

str net 順序 復雜 讓我 創建 函數 高程 gin 孫廣東 2015.8.15比方在3D rpg遊戲中。我們想設置彈道，不同的軌跡類型！目的:這篇文章的主要目的是要給你關於在遊戲怎樣使用貝塞爾曲線的基本想法。 貝塞爾曲線是最主要的曲線，一般用

【Unity3d遊戲開發】遊戲中的貝塞爾曲線以及其在Unity中的實現

轉載收藏：原文連結https://www.cnblogs.com/msxh/p/6270468.html 閱讀目錄 一、簡介 二、公式 三、實現與應用 　　RT，馬三最近在參與一款足球遊戲的開發，其中涉及到足球的各種運動軌跡和路徑，比如射門的軌跡，高吊球

025.自定義View中應用貝塞爾曲線

之前一直看QQ的未讀訊息拖拽消失設計得很好，我一直覺得那個設計很好，他們的UI是真心強，於是，我也一直想寫個一樣的玩意來玩玩。最近剛好在複習View相關的知識，就拿這個來練手，下面先來看實現的效果圖： 這是我希望實現的效果，這個效果的實現在第二個圖能看出一點端倪。這裡面的曲線繪製，

專案開發中的貝塞爾曲線

本文由鄒啟文授權網易雲社群釋出。 郵箱大師PC版中，設計師提出了一個很妙的想法： 發信時，出現一個飛機，從寫信中央飛往進度目的地。  附加要求： 1，飛行曲線，飛機先加速，然後減速抵達終點 2，飛行途中，需要轉換飛機朝向 3，飛行途中，飛機漸漸變小 

Unity__如何在遊戲中體現貝塞爾曲線

一、簡介 貝塞爾曲線是最基本的曲線，一般用在計算機 圖形學和 影象處理。貝塞爾曲線可以用來建立平滑的曲線的道路、 彎曲的路徑就像 祖瑪遊戲、 彎曲型的河流等。         一條貝塞爾曲線是由一組定義的控制點 P0到 P

Unity中利用貝塞爾曲線來實現3D中的曲線運動

下面是在理解後寫的2階三階曲線 using UnityEngine; using System.Collections; using System.Collections.Generic; public class TestCurve : MonoBehaviour

繪製貝塞爾曲線

簡介明瞭直接上程式碼： #define PI 3.14159265 struct point { float x; float y; }; void decas(int point_count, struct point *point_v, float t, str

繪製貝塞爾曲線（）

<!DOCTYPE html> <html> <style type="text/css"> body{text-align: center;} #can{ border:1px solid black;} </st

HTML5畫布Canvas線段、矩形、弧形及貝塞爾曲線等簡單圖形繪製

HTML5中最有意思的就是這個canvas了 通過它我們可以畫自己想要的圖形 它也是十分重要的技術 應用於遊戲、圖表等等 或者繪製各種酷炫的東西 這裡給大家分享一個網站 傳送門 裡面都是canvas技術繪製的圖形畫布建立canvas是html的一個標籤 是一個圖形容器 首先要

貝塞爾曲線與CSS3動畫、SVG和canvas的應用

document cnblogs blank otto style 函數 alt one absolut 簡介 貝塞爾曲線是可以做出很多復雜的效果來的，比如彈跳球的復雜動畫效果，首先加速下降，停止，然後彈起時逐漸減速的效果。 使用貝塞爾曲線常用的兩個網址如下： 緩動函

canvas 繪制三次貝塞爾曲線

png 繪制 ges nload 代碼 idt head mage src 代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

canvas 繪制二次貝塞爾曲線

logs text lineto quad img utf 技術分享 bsp element 代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

多個貝塞爾曲線在同一個animate動畫中的實踐

貝塞爾曲線(Bézier curve)： 又稱貝茲曲線或貝濟埃曲線，是應用於二維圖形應用程式的數學曲線。一般的向量圖形軟體通過它來精確畫出曲線，貝茲曲線由線段與節點組成，節點是可拖動的支點，線段像可伸縮的皮筋，我們在繪圖工具上看到的鋼筆工具就是來做這種向量曲線的。貝塞爾曲線是計算機圖形學中相

三次貝塞爾曲線關於點與長度在C++中實現：

三階貝塞爾曲線只能計算近似解，由於使用時對長度的精度要求不高，因此用部落格 【Unity】貝塞爾曲線關於點、長度、切線計算在 Unity中的C#實現 中提供的C#方法改寫為C++的，只是替換了一個結構體，因為並不懂原文中的Vector3類的使用而已。 定義一個POINT結構體，用

Quartz 2d 用CGContextRef 繪製各種圖形 (文字、圓、直線、弧線、矩形、扇形、橢圓、三角形、圓角形、貝塞爾曲線、圖片)

首先了解下 CGContextRef  Graphics Context是圖形上下文，可以將其理解為一塊畫布，我們可以在上面進行繪畫操作，繪製完成後，將畫布放到我們的View 中顯示即可，View看著是一個畫框。 自己學習時實現的Demo,希望對大家有幫助，具體的實現看程式碼，並有

iOS Quartz2D 繪製簡單圖形--線,圓,弧線,貝塞爾曲線,文字

Quartz2D繪製2D圖形          在iOS中常用的繪圖框架就是Quartz2D, Quartz2D是CoreGraphics框架的一部分, 強大的二維影象繪製引擎, Quartz2D在UIKit框架中也有很好的整合, UIKit中的元件都是由CoreGrap

Android 控制元件沿貝塞爾曲線運動（中）

看了Android貝塞爾曲線屬性動畫（上）是不是在罵我SB，換個貝塞爾曲線的起始點，控制點，終點，控制元件還是按原來路徑運動，So.... 下面我實現了控制元件在隨機的一個貝塞爾曲線上的運動 package com.example.propertyanimsecdemo;

Android開發之Path的高階用法用貝塞爾曲線繪製波浪線

前言：貝塞爾曲線分為一級曲線，二級曲線，三級曲線和多級曲線，利用貝塞爾曲線可以做出很多有意思的動畫和圖形，今天我們就來實現一個比較簡單的波浪線。 -----------------分割線--------------- 初步認識貝塞爾曲線： mPath.moveTo：設定起點

Android 繪圖基礎：Path（繪製三角形、貝塞爾曲線、正餘弦）

學習重點： 理解path的使用 理解貝塞爾曲線的繪製原理 可動正餘弦的繪製 Path的簡單介紹 　　在 Android 繪圖基礎：Canvas畫布——自定義View（繪製錶盤、矩形、圓形、弧、漸變） 中我們可以看到Canvas的強大功能，其實Canva