學習HTML5 canvas遇到的問題

来源:https://www.cnblogs.com/stevexu/archive/2018/10/10/7196081.html
-Advertisement-
Play Games

使用HTML5 canvas的註意事項，非零環繞原則的使用，closePath與lineTo的區別，使用arc產生的問題 ...


　　學習HTML5 canvas遇到的問題

1. 非零環繞原則(nonzZero rule) 

  • 非零環繞原則是canvas在進行填充的時候是否要進行填充的判斷依據。
  • 在判斷填充的區域拉一條線出來，拉到圖形的外面，這條拉出來的線就是輔助線。判斷繪製的線是否是從輔助線的左邊穿過到輔助線的右邊，此時這種穿過的方式記錄為+1;如果是從輔助線的右邊穿到輔助線的左邊，就記做-1.最後將所有記錄的數字進行求和，如果求和的結果為0，代表這塊區域不要填充，否則，必須填充
  • 上面的原理較難理解，可以這樣理解，當在大矩形中繪製小矩形，大矩形的繪製方向與小矩形的繪製方向相同時，填充顏色後，大小矩形都填充相同顏色；大矩形的繪製方向與小矩形的繪製方向相反時，填充顏色後，小矩形不會填充顏色，大矩形與小矩形之間的區域會填充顏色。
  • 大矩形的繪製方向與小矩形的繪製方向相同時的代碼
  •  1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5 <meta charset="UTF-8">
 6 <title>非零環繞原則</title>
 7 </head>
 8 
 9 <body>
10 <canvas id="canvas" style="margin:0 auto;border:1px #666 solid" width="800" height="600">
11 </canvas>
12 <script>
13 var canvas = document.getElementById('canvas');
14 var ctx = canvas.getContext('2d');
15 ctx.moveTo(100, 100);
16 ctx.lineTo(100, 400);
17 ctx.lineTo(400, 400);
18 ctx.lineTo(400, 100);
19 ctx.lineTo(100, 100);
20 
21 ctx.moveTo(200, 200);
22 ctx.lineTo(300, 300);
23 ctx.lineTo(300, 300);
24 ctx.lineTo(300, 200);
25 ctx.lineTo(200, 200);
26 ctx.fill();
27 </script>
28 </body>
29 
30 </html>
    View Code

     

  • 大矩形的繪製方向與小矩形的繪製方向相同時的效果圖
  • 大矩形的繪製方向與小矩形的繪製方向相反時的代碼
  •  1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5 <meta charset="UTF-8">
 6 <title>非零環繞原則</title>
 7 </head>
 8 
 9 <body>
10 <canvas id="canvas" style="margin:0 auto;border:1px #666 solid" width="800" height="600">
11 </canvas>
12 <script>
13 var canvas = document.getElementById('canvas');
14 var ctx = canvas.getContext('2d');
15 ctx.moveTo(100, 100);
16 ctx.lineTo(100, 400);
17 ctx.lineTo(400, 400);
18 ctx.lineTo(400, 100);
19 ctx.lineTo(100, 100);
20 
21 ctx.moveTo(200, 200);
22 ctx.lineTo(300, 200);
23 ctx.lineTo(300, 300);
24 ctx.lineTo(200, 300);
25 ctx.lineTo(200, 200);
26 ctx.fill();
27 </script>
28 </body>
29 
30 </html>
    View Code

     

  • 大矩形的繪製方向與小矩形的繪製方向相反時效果圖

 

2. closePath() 與 lineTo()的區別 

 

  • closePath與lineTo閉合是有區別的,closePath閉合自然，lineTo閉合會有鋸齒,僅在閉合的連接處會有區別
  • 效果圖
  •  1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5 <meta charset="UTF-8">
 6 <title>Document</title>
 7 <style>
 8 canvas {
 9 display: block;
10 margin: 100px auto;
11 border: 1px solid #000;
12 }
13 </style>
14 </head>
15 
16 <body>
17 <canvas id="myCanvas" width="600px" height="400px"></canvas>
18 <script>
19 var myCanvas = document.getElementById("myCanvas");
20 var ctx = myCanvas.getContext('2d');
21 ctx.lineWidth = 20;
22 ctx.moveTo(100, 100);
23 ctx.lineTo(100, 100 + 100);
24 ctx.lineTo(100 + 100, 100 + 100);
25 ctx.lineTo(100, 100);
26 
27 ctx.moveTo(300, 100);
28 ctx.lineTo(300, 100 + 100);
29 ctx.lineTo(300 + 100, 100 + 100);
30 ctx.closePath();
31 ctx.stroke();
32 </script>
33 </body>
34 </html>
    View Code

     

 

3. arc繪圖的註意事項 

  • 使用 arc 繪圖的時候, 如果沒有設置 moveTo ,那麼會從開始繪弧的地方作為起始點，連線到圓弧的起點.
  • 如果使用 stroke 方法, 那麼會連線到圓弧的起始位置. 如果是 fill 方法, 會自動閉合路徑填充.
  •  1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style>
 7 canvas{
 8 display: block;
 9 margin: 0 auto;
10 border: 1px solid #666;
11 }
12 </style>
13 </head>
14 <body>
15 <canvas id="myCanvas" width="800" height="300"></canvas>
16 <script>
17 var myCanvas = document.getElementById("myCanvas");
18 var ctx = myCanvas.getContext('2d');
19 ctx.moveTo(50,100);
20 ctx.lineTo(100,100);
21 ctx.arc(150,150,50,0,Math.PI);
22 ctx.stroke();
23 
24 ctx.moveTo(200,100);
25 ctx.lineTo(300,100);
26 ctx.arc(300,150,50,0,Math.PI*1.2);
27 ctx.stroke();
28 
29 ctx.beginPath();
30 ctx.moveTo(400,100);
31 ctx.lineTo(500,100);
32 ctx.arc(500,150,50,0,Math.PI*1.2);
33 ctx.fill();
34 
35 ctx.beginPath();
36 ctx.moveTo(600,50);
37 ctx.lineTo(700,100);
38 ctx.arc(700,150,50,0,Math.PI*1.2);
39 ctx.fill();
40 </script>
41 </body>
42 </html>
    View Code

     

  • 效果圖

3.1 解決方法一：使用beginPath()，開啟新的路徑，兩次繪製的圖形就不會相互產生影響

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style>
 7 canvas{
 8 display: block;
 9 margin: 0 auto;
10 border: 1px solid #666;
11 }
12 </style>
13 </head>
14 <body>
15 <canvas id="myCanvas" width="800" height="300"></canvas>
16 <script>
17 var myCanvas = document.getElementById("myCanvas");
18 var ctx = myCanvas.getContext('2d');
19 ctx.moveTo(50,100);
20 ctx.lineTo(100,100);
21 //使用beginPath(),多添加的兩句代碼
22 ctx.stroke();
23 ctx.beginPath();
24 ctx.arc(150,150,50,0,Math.PI);
25 ctx.stroke();
26 </script>
27 </body>
28 </html>
View Code

效果圖

3.2 解決方法一：使用moveTo(),將上一個圖形的終點移動到下一個即將繪製的圖形上，就可以解決問題,效果與上面的解決方法相同。但是，該方法只需要使用一次stroke().

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style>
 7 canvas{
 8 display: block;
 9 margin: 0 auto;
10 border: 1px solid #666;
11 }
12 </style>
13 </head>
14 <body>
15 <canvas id="myCanvas" width="800" height="300"></canvas>
16 <script>
17 var myCanvas = document.getElementById("myCanvas");
18 var ctx = myCanvas.getContext('2d');
19 ctx.moveTo(50,100);
20 ctx.lineTo(100,100);
21 //添加moveTO()這一句代碼即可
22 ctx.moveTo(200,150);
23 ctx.arc(150,150,50,0,Math.PI);
24 ctx.stroke();
25 </script>
26 </body>
27 </html>
View Code

 

3.3  arc的一個小應用，繪製圓環進度條，使用了lineWidth

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5 <meta charset="UTF-8">
 6 <title>Document</title>
 7 <style>
 8 canvas {
 9 display: block;
10 margin: 0 auto;
11 border: 1px solid #666;
12 }
13 </style>
14 </head>
15 
16 <body>
17 <canvas id="myCanvas" width="400" height="400"></canvas>
18 <script>
19 var myCanvas = document.getElementById("myCanvas");
20 var ctx = myCanvas.getContext('2d');
21 
22 function toRad(d) {
23 return d * Math.PI / 180;
24 }
25 var x = 200
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Webpack編譯結果淺析
    如今Webpack已經是一個不可或缺的前端構建工具，藉助這個構建工具，我們可以使用比較新的技術（瀏覽器不能直接支持）來開發。 你是否好奇你寫的代碼經過Webpack構建之後會生成什麼東西？是否有時調試遇到莫名其妙的問題？ 本文不講如何進行配置，只是基於幾個基礎的例子，簡要分析一下 webpack@4 ...
  • webpack4 系列教程(十一)：字體文件處理
    教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步 "《webpack4 系列教程(十一)：字體文件處理》原文地址" 。或者來我的小站看更多內容： "godbmw.com" 0. 課程介紹和資料 " 本節課源碼" " 所有課程源碼" 本節課的代碼目錄如下： 本節課的 內容如下： 1. ...
  • Array對象常用屬性
    concat() 用於連接兩個或多個數組。該方法不會改變現有的數組，而僅僅會返回被連接數組的一個副本。 every() 用於檢測數組所有元素是否都符合指定條件（通過函數提供）。 every() 方法使用指定函數檢測數組中的所有元素： 如果數組中檢測到有一個元素不滿足，則整個表達式返回 false ， ...
  • DOM事件-調用函數
    通過調用函數改變其內容： 輸出： 點擊出現： ...
  • 純JS實現前端動態分頁碼
    思路分析：有3種情況 第一種情況，當前頁面curPage < 4 第二種情況，當前頁面curPage == 4 第三種情況，當前頁面curPage>4 此外，還要考慮，當前頁碼 curPage < pageTotal（總頁碼）-2，才顯示 ... 首先，先是前端的佈局樣式 <!-- 後面會在JS中動 ...
  • css的再深入4（更新中···）
    兩種居中的方式： Margin:0 auto;和text-align:center; Margin的居中是對自身，text-align對元素內部的文本來說。 隱藏的兩種方式： visibility：hidden；和display:none; visibility 隱藏了還占用著空間，display隱 ...
  • 事件冒泡與事件捕獲
    需要瞭解的知識點： 1. 向指定元素添加事件的方法：addEventListener()方法 2. Dom2級事件中事件流的三個階段：事件捕獲階段、目標元素、事件冒泡階段 3. javascript中 “this與e.target”的區別 addEventListener()方法 語法：addEve ...
  • js，setTimeout與setInterval的用法
    1.setTimeout與setInterval的區別 setTimeout： 1.直接使用的話，按照指定 的時間，只執行一次傳入的函數參數。 2.函數的終止使用clearTimeout。 setInterval： 1.直接使用的話，按照指定的時間，迴圈執行傳入的函數參數 2.函數的終止使用clea ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類