[js高手之路] html5 canvas系列教程 - arcTo(弧度與二次,三次貝塞爾曲線以及線上工具)

来源:http://www.cnblogs.com/ghostwu/archive/2017/09/26/7597438.html
-Advertisement-
Play Games

之前，我寫了一個arc函數的用法：[js高手之路] html5 canvas系列教程 - arc繪製曲線圖形(曲線，弧線，圓形). arcTo: cxt.arcTo( cx, cy, x2, y2, 半徑 ) cx,cy表示控制點的坐標，x2,y2表示結束點的坐標，如果我們想畫一條弧線，需要提供3個 ...


之前，我寫了一個arc函數的用法：[js高手之路] html5 canvas系列教程 - arc繪製曲線圖形(曲線，弧線，圓形).

arcTo:

cxt.arcTo( cx, cy, x2, y2, 半徑 )

cx,cy表示控制點的坐標，x2,y2表示結束點的坐標，如果我們想畫一條弧線，需要提供3個坐標，開始點，控制點和結束點. 開始點一般可以通過moveTo或者lineTo提供.arcTo提供控制點和結束點.

 1 <style>
 2     body {
 3         background: #000;
 4     }
 5 
 6     #canvas {
 7         background: white;
 8     }
 9 </style>
10 <script>
11     window.onload = function () {
12         var oCanvas = document.querySelector("#canvas"),
13             oGc = oCanvas.getContext('2d');
14 
15         var x1 = 50,
16             y1 = 100,
17             cx = 500,
18             cy = 100,
19             x2 = 450,
20             y2 = 200;
21         oGc.lineWidth = '2px';
22         oGc.strokeStyle = 'red';
23         oGc.moveTo( x1, y1 );
24         oGc.arcTo( cx, cy, x2, y2, 50 );
25         oGc.stroke();
26     }
27 </script>
28 </head>
29 <body>
30     <canvas id="canvas" width="800" height="600"></canvas>
31 </body>

加大半徑( 其他代碼保持不變，半徑調成100 ）弧度將會變大!

oGc.arcTo( cx, cy, x2, y2, 100 );

如果調整結束點，把結束點與控制點形成一個直角，那麼弧度將不會這麼彎曲

 1 var x1 = 50,
 2             y1 = 100,
 3             cx = 500,
 4             cy = 100,
 5             x2 = 500,
 6             y2 = 200;
 7         oGc.lineWidth = '2px';
 8         oGc.strokeStyle = 'red';
 9         oGc.moveTo( x1, y1 );
10         oGc.arcTo( cx, cy, x2, y2, 100 );
11         oGc.stroke();

如果把開始點的橫坐標放大，半徑也放大，那麼得到的形狀是這樣的!

 1 var x1 = 400,
 2     y1 = 100,
 3     cx = 500,
 4     cy = 100,
 5     x2 = 500,
 6     y2 = 200;
 7 oGc.lineWidth = '2px';
 8 oGc.strokeStyle = 'red';
 9 oGc.moveTo( x1, y1 );
10 oGc.arcTo( cx, cy, x2, y2, 300 );
11 oGc.stroke();

看到這些形狀，你知道他能用在哪些地方嗎？

貝塞爾曲線：

如果你初次瞭解貝塞爾曲線，這裡有一篇非常的文章可以參考下:

http://www.html-js.com/article/1628

再來一個工具，這個工具提供了canvas中貝塞爾曲線的開始點，控制點與結束點的坐標：

http://myst729.github.io/bezier-curve/

canvas二次貝塞爾曲線的函數語法：

cxt.quadraticCurveTo( cx, cy, x2, y2 );

cx,cy控制點坐標，x2,y2:結束點坐標, 開始點一般由moveTo, lineTo提供.

畫一個二次貝塞爾曲線：

 1 <style>
 2     body {
 3         background: #000;
 4     }
 5     #canvas {
 6         background: white;
 7     }
 8 </style>
 9 <script>
10     window.onload = function () {
11         var oCanvas = document.querySelector("#canvas"),
12             oGc = oCanvas.getContext('2d');
13 
14         oGc.strokeStyle = 'red';
15         oGc.moveTo( 140, 80 );
16         oGc.quadraticCurveTo( 411, 77, 418, 277 );
17         oGc.stroke();
18     }
19 </script>
20 </head>
21 <body>
22     <canvas id="canvas" width="800" height="600"></canvas>
23 </body>

    

三次貝塞爾曲線

canvas三次貝塞爾曲線的函數語法：

cxt.bezierCurveTo( cx1, cy1, cx2, cy2, x2, y2 );

cx1,cx2 表示第一個控制點，cx2,cy2表示第二個控制點，x2, y2表示結束點坐標。開始點一般由moveTo, lineTo提供.

畫一個三次貝塞爾曲線：

 1 <style>
 2     body {
 3         background: #000;
 4     }
 5     #canvas {
 6         background: white;
 7     }
 8 </style>
 9 <script>
10     window.onload = function () {
11         var oCanvas = document.querySelector("#canvas"),
12             oGc = oCanvas.getContext('2d');
13 
14         oGc.strokeStyle = 'red';
15         oGc.moveTo( 234, 224 );
16         oGc.bezierCurveTo( 301, 68, 454, 361, 555, 162 );
17         oGc.stroke();
18     }
19 </script>
20 </head>
21 <body>
22     <canvas id="canvas" width="800" height="600"></canvas>
23 </body>

     

畫一個餅圖：

 1 <style>
 2     body {
 3         background: #000;
 4     }
 5     #canvas {
 6         background: white;
 7     }
 8 </style>
 9 <script>
10     window.onload = function () {
11         var oCanvas = document.querySelector("#canvas"),
12             oGc = oCanvas.getContext('2d');
13 
14         oGc.beginPath();
15         oGc.fillStyle = 'red';
16         oGc.moveTo( 300, 200 );
17         oGc.arc( 300, 200, 100, 0 * Math.PI / 180, 120 * Math.PI / 180, false );
18         oGc.closePath();
19         oGc.fill();
20 
21         oGc.beginPath();
22         oGc.fillStyle = 'orange';
23         oGc.moveTo( 300, 200 );
24         oGc.arc( 300, 200, 100, 120 * Math.PI / 180, 240 * Math.PI / 180, false );
25         oGc.closePath();
26         oGc.fill();
27 
28         oGc.beginPath();
29         oGc.fillStyle = '#09f';
30         oGc.moveTo( 300, 200 );
31         oGc.arc( 300, 200, 100, 240 * Math.PI / 180, 360 * Math.PI / 180, false );
32         oGc.closePath();
33         oGc.fill();
34     }
35 </script>
36 </head>
37 <body>
38     <canvas id="canvas" width="800" height="600"></canvas>
39 </body>

畫一個圓角矩形：

 1 <style>
 2     body {
 3         background: #000;
 4     }
 5     #canvas {
 6         background: white;
 7     }
 8 </style>
 9 <script>
10     window.onload = function () {
11         var oCanvas = document.querySelector("#canvas"),
12             oGc = oCanvas.getContext('2d');
13 
14         oGc.strokeStyle = 'red';
15         oGc.lineWidth = '2px';
16         oGc.moveTo( 200, 100 );
17         oGc.lineTo( 500, 100 );
18         oGc.arcTo( 600, 100, 600, 200, 100 );
19         oGc.moveTo( 600, 200 );
20         oGc.lineTo( 600, 400 );
21         oGc.arcTo( 600, 500, 500, 500, 100 );
22         oGc.moveTo( 500, 500 );
23         oGc.lineTo( 200, 500 );
24         oGc.arcTo( 100, 500, 100, 400, 100 );
25         oGc.moveTo( 100, 400 );
26         oGc.lineTo( 100, 200 );
27         oGc.arcTo( 100, 100, 200, 100, 100 );
28         oGc.stroke();
29     }
30 </script>
31 </head>
32 <body>
33     <canvas id="canvas" width="800" height="600"></canvas>
34 </body>


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Web前端基礎——jQuery（一）
    前幾天回老家呆了幾天，幾乎沒有怎麼學習新的知識，這期間一直有斷斷續續的看《Java編程思想》，還刷了一些前沿消息，也算沒閑著。今天開始學習jQuery啦，繼續前進。 在網上查了，買了這本書。現在是一邊搜視頻，一邊看這本書。 認識jQuery，我將從以下幾方面進行講解。 一、JavaScript和Ja ...
  • 《移動Web前端高效開發實戰》筆記1——靜態佈局在移動端上的自適應
    1.整體縮放 整體縮放可以用在營銷活動頁，營銷活動可能因為設計美觀需求必須使用背景圖片而非背景色，因此需要考慮背景圖適應屏幕大小。開發者可以用320像素的寬度作為基礎寬度（高度可以固定），然後通過計算實際文檔寬度來進行相應縮放。 使用整體縮放佈局開發的項目在載入過程中需要監聽resize事件，代碼如 ...
  • [js高手之路] html5 canvas系列教程 - 文本樣式(strokeText,fillText,measureText,textAlign,textBaseline)
    接著上文線條樣式[js高手之路] html5 canvas系列教程 - 線條樣式(lineWidth,lineCap,lineJoin,setLineDash)繼續. canvas提供兩種輸出文本的方式： strokeText：描邊文本 fillText：填充文本 fillStyle配合fillTe ...
  • 覆選框demo
    本篇文章是關於覆選框的，有2種形式：1、全選、反選由2個按鈕實現；2、全選、反選由一個按鈕實現。 在實踐中碰到一個問題——check全選失效。解決辦法，使用prop方法代替attr。 這或許是和jQuery版本有關。 ...
  • [js高手之路] html5 canvas系列教程 - 線條樣式(lineWidth,lineCap,lineJoin,setLineDash)
    上文，寫完弧度與貝塞爾曲線[js高手之路] html5 canvas系列教程 - arcTo(弧度與二次,三次貝塞爾曲線以及線上工具)，本文主要是關於線條的樣式設置 lineWidth: 設置線條的寬度，值是一個數值，如lineWidth = 5. 畫3條不同寬度的線條： lineWidth設置弧形 ...
  • react.js 高階組件----很簡單的實例理解高階組件思想
    調試代碼之前，我設置了兩個緩存 分別是username和content 在控制台console設置兩個緩存代碼 localStorage.setItem('username','老王')localStorage.setItem('content','類容') 運行下麵代碼一定要先設置這兩個緩存，因為 ...
  • vue父組件中獲取子組件中的數據
    自己寫了個上傳圖片的子組件，父組件需要獲取到子組件上傳的圖片地址，這裡最好的辦法是給相應的子組件加ref, 父組件在最後提交的時候獲取thi.$ref.avatar.相應數據即可，因為在這裡才能保證圖片已經上傳，否則如果圖片沒上傳，拿到的值一定為空。 ...
  • 演算法之旅 | 冒泡排序法
    HTML5學堂-碼匠：本期繼續走入演算法 —— 冒泡排序法。冒泡排序演算法相對簡單，容易上手，穩定性也比較高, 算是一種較好理解的演算法，也是面試官高頻提問的演算法之一。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類