學習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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類