2. 程式人生 > >web前端：Canvas 基礎（一）

web前端：Canvas 基礎（一）

阿新 • • 發佈：2019-01-14

0.前言

最近忙裡偷閒，來寫寫文章。

————-我是華麗的分割線————–

終於把這篇文章寫完了，關於本文，針對讀者主要是之前從未接觸過 Canvas的同學。當然，你要學 canvas 一定要有 JS 基礎啦。

其次就是，因為前前後後耽誤了兩天時間，可能在書寫和描述中出現一些小的紕漏，請各位讀者老爺見諒。

最後，也希望這篇文章能夠對迷茫的你產生一些幫助，感謝。

1. canvas 簡介

1.1 canvas 是什麼？

是HTML5中重要的元素,和audio、video元素類似完全不需要任何外部外掛就能夠執行.

Canvas中文翻譯就是”畫布”.它提供了強大的圖形的處理功能(繪製,變換,畫素處理…)。

但是需要注意，canvas 元素本身並不繪製圖形，它只是相當於一張空畫布。

如果開發者需要向 canvas 上繪製圖形，則必須使用 JavaScript 指令碼進行繪製。

1.2 canvas 能夠做什麼？

  • 基礎圖形的繪製
  • 文字的繪製
  • 圖形的變形和圖片的合成
  • 圖片和視訊的處理
  • 動畫的實現
  • 小遊戲的製作

1.3 支援的瀏覽器

大多數現代瀏覽器都是支援Canvas的,比如 Firefox, safari, chrome, opera的最近版本以及IE9都支援.

 IE8及以下不支援HTML5,但是我們可以進行提示使用者更新到最新的版本

1.4 關於canvas 標籤的基本概念

在 HTML 頁面上定義 canvas 元素與定義其他普通元素並無任何不同，它吃了可以指定 id, style ,class ,hidden 等通用屬性之外，還可以設定 width 和 height 兩個屬性。

為什麼要特意去說這個呢？

咱們在 章節 2.2 中詳細去說明。

除此之外，我們在網頁中定義 canvas 元素之後，它只是一張空白的畫布，想要在畫布上繪畫，一定要經過下面幾步。

  1. 獲取 canvas 元素對應的 DOM 物件，這必須是一個 canvas 物件
  2. 呼叫 canvas 物件的 getContext( ) 方法,該方法返回一個 canvasRenderingContext2D 物件，該物件可以繪製圖形。
  3. 呼叫 canvasRenderingContext2D 物件的方法進行繪圖。

那麼我們就來開始我們的canvas 實戰，來看看 canvas 該如何會繪製圖形。

2.canvas 實戰

2.1 檢視當前瀏覽器對 canvas 的支援情況

我們在上面也說明了，我們的一些瀏覽器是不支援 canvas 的，這個時候我們應該怎麼去做呢？

這時候我們可以直接在 canvas 標籤之間去書寫內容，這麼做的好處是當你的瀏覽器不支援 canvas 的時候，我們可以去展示標籤之間的內容，具體如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        html,body{
            margin: 0px;
        }
        canvas{
            background: #ccc;
        }
    </style>
</head>
<body>
    <canvas>
        我們在設定 canvas 之前需要首先監測使用者電腦是否支援 canvas
    </canvas>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

既然已經建立完成了具體的內容，那我們現在可以看見了麼？

我們雖然沒有給定 canvas 的寬度和高度，但是實際上我們的canvas 在頁面中是可見的。

需要注意，canvas 預設樣式的寬度和高度 是 300px * 150px.

即使我們不去設定具體的寬度和高度，它也是可以顯示的。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  html,body{
   margin: 0px;
  }
  canvas{
   background: #ccc;
  }
 </style>
</head>
<body>
 <canvas>
  我們在設定 canvas 之前需要首先監測使用者電腦是否支援 canvas
 </canvas>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

2.png

那我們該如何去修改畫布的預設大小呢？

2.2 修改 Canvas 的畫布

按照我們正常的思路來說，我們會直接去使用 canvas_1.style.width = "500px"; 來去修改我們的 canvas 的寬度，但是這樣真的對麼？

答案當然是否定的，canvas 相當於是一張圖片，如果我們設定 <canvas width="500" height="500">.

這樣寫相當於圖片的實際大小是 500 * 500.

但是，假如我們這樣去書寫。

<canvas style="width:500px;height:500px;">

這樣實際是把 canvas 預設的 300 * 150 的圖片強行拉伸為 500px * 500px 了，所以這樣會導致我們的內容被強行縮放，從而導致問題。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  html,body{
   margin: 0px;
  }
  canvas{
   background: #ccc;
  }
 </style>
</head>
<body>
 <canvas id="canvas_1">
  我們在設定 canvas 之前需要首先監測使用者電腦是否支援 canvas
 </canvas>
</body>
<script type="text/javascript">
 var canvas_1 = document.getElementById("canvas_1");
 // 設定寬度和高度,但是這種寫法會造成額外的問題
 // 畫布會拉伸
 // canvas_1.style.width = "500px";
 // canvas_1.style.height = "500px";

 // 所以推薦寫法
 // 1.使用內聯樣式表
 // 2.去使用點(.)
 canvas_1.width = "500"; //注意，不要加 px
 canvas_1.height = "500";

</script>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

2.3 獲取繪製環境

我們在上面已經設定了我們的畫布的大小，但是存在一個問題。

我們還沒有找到我們的畫布呀！~

要是我們連具體的畫布都沒有，我們又該向哪裡去繪畫呢？

實際上我們可以通過 var ctx = canvas_1.getContext("2d"); 來去獲取到我們的繪製環境。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas_1" width="500" height="400" style="box-shadow: 0 0 20px black;">
        當前瀏覽器不支援 canvas
    </canvas>
</body>
<script type="text/javascript">

    // 獲取 canvas 元素對應的 DOM 物件
    var canvas_1 = document.getElementById("canvas_1");

    // 獲取在 canvas 上繪圖的 canvasRenderingContent2D 物件
    var ctx = canvas_1.getContext("2d");

    // 列印一下，檢視是否能夠顯示具體環境
    console.log(ctx);

</script>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

假如列印成功，我們應該可以在瀏覽器中的 console 中檢視到我們的畫布具體資訊。

3.png

但是請注意，getContext("2d"); 中一定是2d而不是2D，否則不會生效。

2.4 繪製的座標軸

既然我們已經能夠獲取到我們具體的畫布了，那我們是不是開始繪製了呀。

先等等，我們首先先來分析一個問題，就是我們繪製圖形的時候，以這個一個區域，我們應該從哪裡開始，設定的數值又應該從哪裡開始呢？這時候你就應該去想一想，是不是存在這麼一個座標軸，可以根據這個座標軸來書寫我們的數值呢？

Paste_Image.png

請注意，橫軸向右是正，縱軸向下是正。

2.5 繪製直線

我們既然要畫一條直線，我們是不是至少應該有這麼幾個條件呢？

  • 線的起點
  • 線的終點
  • 線的顏色
  • 線的寬度

所以我們接下來，就需要開始我們的程式碼書寫了。

我們該如何去進行繪製呢？

我們需要一些工具，需要具體的方法。

方法 說明
beginPath() 開始定義路徑
closePath() 關閉前面定義的路徑
moveTo(float x,float y) 把 canvas 的當前路徑的結束點移動到 x, y 對應的點
lineTo(float x,float y) 把 canvas 的當前路徑從當前結束點連線到 x , y 對應的點

需要注意，moveTo 可以簡單理解為，把當前繪製圖像的起點設定為某一特定座標，而 lineTo 則是將當前的起點和你想要設定的那個點之間連線起來。

而 beginPath 是表示開始定義路徑，不會產生特殊的效果。而 closePath 除了表示關閉當前定義的路徑之外，還會有一個特殊的作用，就是可以將當前繪製圖形的最後一個點和我們繪製圖形開始的點進行連線，這一點咱們在章節2.6 中詳細去看一下。當然，如果你只需要畫一條線，不去加beginPath 和 closep 你的內容實際也是可以出來的，但是推薦加上。

這個時候我們可以來執行一下，看看效果是否能夠出來。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
            當前瀏覽器不支援 canvas
        </canvas>
    </div>
</body>
<script type="text/javascript">
    // 獲取 canvas 元素對應的 DOM 物件
    var canvas_1 = document.getElementById("canvas_1");

    // 獲取在 canvas 上繪圖的 canvasRenderingContent2D 物件
    var ctx = canvas_1.getContext("2d");

    // 列印一下，檢視是否能夠顯示具體環境
    console.log(ctx);

    // 開始繪製
    ctx.beginPath();

    //設定繪製起點
    ctx.moveTo(0,0);

    //設定繪製下一個點
    ctx.lineTo(700,400);

    //結束繪製
    ctx.closePath();

</script>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

相關推薦

web前端：Canvas 基礎（一）

0.前言 最近忙裡偷閒，來寫寫文章。 ————-我是華麗的分割線————– 終於把這篇文章寫完了，關於本文，針對讀者主要是之前從未接觸過 Canvas的同學。當然，你要學 canvas 一定要有 JS 基礎啦。 其次就是，因為前前後後耽誤了兩天

Web前端-Html部分筆記（一）

以下是我對Web前端-Html部分的筆記，因為博主也是初學Web前端，有很多東西都還停留在表層的理解，如果我的部落格有任何錯誤，請及時評論或者私信我，我會及時更改。也歡迎同樣初學Web-前端的你願意關注我的部落格，我會把我每週的學習內容進行整理和上傳，方便大家溝通和交流學習經驗。 由於是筆記

程式設計菜鳥到大佬之路：演算法基礎（一）

第一天學習精要 列舉 完美立方 列舉：基於逐個嘗試答案的一種問題求解策略。 例題1：完美立方 題目描述 形如

web前端進化之路（一）——小程式開發

最近學習前端感覺很多知識學起來容易，但是很多知識點很容易忘記，想做一個工具來方便自己來學習，正好結合小程式，分享給大家。照顧初學者，可能講的比較細，理解哈。 準備工具 小程式一個 已申請（名稱是：we

Web前端開發學習筆記 （一）

最近簡單地學習了一些網頁（HTML5 + CSS3 + JS）的基本知識，做一個簡單的學習筆記，下面進入正題： 一、程式設計軟體 編寫網頁的軟體有很多，例如專業級的Microsoft FrontPage、Dreamweaver，還有普通的文字編輯器Sub

Web自動化測試-Protractor基礎（一）

官方原文： Protractor is an end-to-end test framework for Angular and AngularJS applications. Protractor runs tests against your a

Web前端持續整合方案（一）

一、引言     前端專案從開發到部署上線，中間通常要做一些額外的處理。比如程式碼壓縮、合併、css預編譯、巨集替換等。對於一個成熟的專案，這些通常都是通過指令碼自動完成的。本文結合專案實踐，介紹grunt在web前端持續整合中的應用。 二、專案工程化     1、開發一

五分鐘學會 Canvas 基礎（一）

0.前言 最近忙裡偷閒，來寫的這篇文章，但是中午出去吃個飯，回來因為自己的誤操作，把上午的文章全刪除了，還沒法找回。 小編真的是瞬間覺得整個人生都灰暗了。 心塞，這次真的不想多說什麼了。 ————-我是華麗的分割線————– 終於把這篇文

第一章：JavaScript基礎---（一）基礎語法

很渴望快速學習完成專案，不希望花費太多的時間來學習一門語言，雖然本文沒有詳細介紹特性但是以下 程式碼執行就足以理解JavaScript語法，觀察以下程式碼，複製到文字中用瀏覽器開啟。 JavaScript是大小寫敏感的， 這裡我們快速的瞭解它的語法 作為入門練習可以每個程式

Java基礎（一）異常處理關鍵字：try catch finally throw throws

cut main 5.1 模型 指針 str control 情況 實例 　　嗨咯，大家晚上好，我的博客首篇開始了 ，我們一起加油吧！ 都說java 語言是非常健壯性 如：垃圾回收機制、內存模型、異常處理，強類型轉換、跨平臺,等等，使得Java語言的受到青睞。今天我們先來聊

canvas學習（一）：線條，圖像變換和狀態保存

itl height tar 默認 class limit 方法 星空 stop canvas學習（一）：線條，圖像變換和狀態保存 一：繪制一條線段： var canvas = document.getElementById(‘canvas‘) var ctx = can

SQL夯實基礎（一）：inner join、outer join和cross join的區別

創建 color varchar mage bubuko where 是你 cross http 一、數據構建 先建表，再說話 create database Test use Test create table A ( AID int identity(1

前端性能優化（一）：桌面瀏覽器前端優化策略

data lan ucc 靜態 sync 怎樣 拆分 打包成 pan 摘要: 前端性能優化是一個很寬泛的概念，本書前面的部分也多多少少提到一些前端優化方法，這也是我們一直在關註的一件重要事情。配合各種方式、手段、輔助系統，前端優化的最終目的都是提升用戶體驗，改善頁面性能，我

Windows核心基礎（一）：許可權級別

許可權級別是CPU中的一個概念，CPU中包含4個許可權級別，分別是0環，1環，2環，3環，CPU設計製造商最初希望0環用於執行核心，1環和2環執行裝置驅動，3環執行應用程式，但是系統設計者為了簡單將驅動和核心都放在0環，應用程式放在3環，沒有使用1環和2環。後來CPU設計製造商乾脆

圖解HTTP之瞭解Web及網路基礎（一）

通常使用的網路（包括網際網路）是在TCP/IP協議族的基礎上運作的，而HTTP屬於它內部的一個子集。 TCP/IP協議族按照層次分別分為：應用層、傳輸層、網路層和資料鏈路層。 應用層，決定了向用戶提供應用服務時通訊的活動。FTP檔案傳輸協議、DNS域名系統、HTTP協議均處於應用層。 傳

Pandas基礎（一）：資料的存取和檢視

使用pandas做資料分析，首先匯入pandas庫： import pandas as pd pandas的資料結構有兩種：Series和DataFrame。前者可以理解為陣列，後者可以理解為表格。我們主要講解DataFrame。 1.建立DataFrame： 由等長列表構成。

分散式理論基礎（一）一致性及解決一致性的兩種方式：2PC和3PC （轉載 不錯）

分散式理論基礎（一）一致性及解決一致性的兩種方式：2PC和3PC 1 一致性 1.1 簡述 一致性，是指對每個節點一個數據的更新，整個叢集都知道更新，並且是一致的 假設一個具有N個節點的分散式系統，當其滿足以下條件時，我們說這個系統滿足一致性： 全認同: 所有N個節點都認同一個結果 值合法: 該結果必須

MyEclipse開發教程：使用REST Web Services管理JPA實體（一）

MyEclipse 線上訂購年終抄底促銷！火爆開搶>> MyEclipse最新版下載 使用REST Web Services來管理JPA實體。在逆向工程資料庫表後生成REST Web服務，下面的示例建立用於管理部落格條目的簡單Web服務。你將學會： 利用資料庫逆向工程開

python3基礎：多程序（一）

程序（Process）是計算機中的程式關於某資料集合上的一次執行活動，是系統進行資源分配和排程的基本單位，是作業系統結構的基礎，程序是執行緒的容器。 基本概念 什麼是程序？ 程序的概念主要有兩點： 第一，程序是一個實體。每一個程序都有它自己的地址空間，一般情況下，包括文字區域（tex

python3基礎：正則（一）

簡介 正則是一個字串規則，本身也是一個字元型，用來檢查一個串是否含有字串。可以做精確匹配，模糊匹配，進行字串替換，切割，尤其是在造資料，分析日誌時用的非常多。 python中處理正則表示式的模組是re模組，正則表示式由一些普通字元和一些元字元組成，普通字元包括大小寫字母、數字和列印符號，而元