【高級功能】使用canvas元素（第一部分）

来源:http://www.cnblogs.com/luka/archive/2016/08/25/5785571.html
-Advertisement-
Play Games

1. 開始使用 canvas 元素 canvas 元素非常簡單，這是指它所有的功能都體現在一個JavaScript對象上，因此該元素本身只有兩個屬性：width 和 height。 canvas 元素里的內容會在瀏覽器不支持此元素時作為備用內容顯示。下麵例子展示了canvas 元素和一些簡單的備用內 ...


1. 開始使用 canvas 元素

canvas 元素非常簡單，這是指它所有的功能都體現在一個JavaScript對象上，因此該元素本身只有兩個屬性：width 和 height。

canvas 元素里的內容會在瀏覽器不支持此元素時作為備用內容顯示。下麵例子展示了canvas 元素和一些簡單的備用內容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用帶有基本備用內容的canvas元素</title>
    <style>
        canvas {border: medium double black;margin: 4px;}
    </style>
</head>
<body>
<canvas width="500" height="200">
    Your browser doesn't support the <code>canvas</code> element
</canvas>
</body>
</html>

其顯示效果如下：

 

2. 獲取畫布上的上下文

為了在canvas元素上繪圖，需要獲得一個上下文對象，這個對象會開放針對特定圖形樣式的繪圖函數。

通過在DOM里代表canvas元素的對象獲得上下文。下表介紹了這個對象：HTMLCanvasElement。

其中關鍵的方法是getContext。為了獲得二維上下文對象，需要給這個方法傳遞參數2d。一旦得到這個上下文，就可以開始繪圖了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>為畫布獲取二維上下文對象</title>
    <style>
        canvas {border: medium double black;margin: 4px;}
    </style>
</head>
<body>
<canvas id="canvas" width="500" height="200">
    Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
    var ctx = document.getElementById("canvas").getContext("2d");
    ctx.fillRect(10,10,50,50);
</script>
</body>
</html>

此例中，用document 對象找到DOM里代表canvas元素的對象，並使用參數2d調用了getContext方法得到上下文對象。然後調用 fillRect方法，它會在畫布上繪製一個實心矩形。

 

3. 繪製圖形

這裡先從canvas對矩形的支持開始。下表介紹了相關方法，所有的這些方法要用在上下文對象上（而不是畫布本身）。

所有這三個方法都要四個參數。前兩個（如表格所示的x和y）是從canvas元素左上角算起的偏移量。w和h參數指定了待繪製矩形的寬度和高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用fillRect和strokeRect方法</title>
    <style>
        canvas {border: medium double black;margin: 4px;}
    </style>
</head>
<body>
<canvas id="canvas" width="500" height="200">
    Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
    var ctx = document.getElementById("canvas").getContext("2d");
    var offset = 10;
    var size = 50;
    var count = 5;
    for(var i=0;i<count;i++){
        ctx.fillRect(i*(offset+size)+offset,offset,size,size);
        ctx.strokeRect(i*(offset+size)+offset,(2*offset)+size,size,size);
    }
</script>
</body>
</html>

此例中的腳本用fillRect 和strokeRect 方法來創建一系列實現和空心的矩形。

用這種方式編寫腳本是為了突出canvas 元素的編程本質。使用JavaScript的for迴圈繪製這些矩形。其實本可以使用10條獨立的語句，每一條都帶有特定的坐標參數，但是canvas的一大樂趣就是可以不必這麼做。

clearRect 方法會清楚指定矩形里已繪製的所有內容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用clearRect方法</title>
    <style>
        canvas {border: medium double black;margin: 4px;}
    </style>
</head>
<body>
<canvas id="canvas" width="500" height="200">
    Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
    var ctx = document.getElementById("canvas").getContext("2d");
    var offset = 10;
    var size = 50;
    var count = 5;
    for(var i=0;i<count;i++){
        ctx.fillRect(i*(offset+size)+offset,offset,size,size);
        ctx.strokeRect(i*(offset+size)+offset,(2*offset)+size,size,size);
        ctx.clearRect(i*(offset+size)+offset,offset+5,size,size);
    }
</script>
</body>
</html>

此例用clearRect方法清楚了之前被fillRect方法繪製過的一片畫布區域。從下圖可以看到效果：

 

4. 設置畫布繪製狀態

繪製操作有繪製狀態（drawing state）加以配置。後者是一組屬性，指定了從線條寬度到填充色的所有參數。當繪製一個圖形時，就會用到繪製狀態的當前設置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在執行操作前設置繪製狀態</title>
    <style>
        canvas {border: medium double black;margin: 4px;}
    </style>
</head>
<body>
<canvas id="canvas" width="500" height="200">
    Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
    var ctx = document.getElementById("canvas").getContext("2d");
    ctx.lineWidth = 2;
    ctx.strokeRect(10,10,50,50);
    ctx.lineWidth = 4;
    ctx.strokeRect(70,10,50,50);
    ctx.lineWidth = 6;
    ctx.strokeRect(130,10,50,50);
    ctx.strokeRect(190,10,50,50);
</script>
</body>
</html>

此例使用了lineWidth屬性，此屬性是繪製狀態的一部分，負責設置用於圖形（比如strokeRect方法生成的那些）的線條寬。當使用strokeRect方法時，lineWidth屬性的當前值就會用於繪製矩形。

下表展示了基本的繪製狀態屬性。

 

4.1 設置線條連接樣式

lineJoin 屬性決定了相互連接的線條應該如何繪製，它有三個值：round、bevel和 miter，預設值是miter。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>設置lineJoin屬性</title>
    <style>
        canvas {border: medium double black;margin: 4px;}
    </style>
</head>
<body>
<canvas id="canvas" width="500" height="140">
    Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
    var ctx = document.getElementById("canvas").getContext("2d");
    ctx.lineWidth = 20;

    ctx.lineJoin = "round";
    ctx.strokeRect(20,20,100,100);
    ctx.lineJoin = "bevel";
    ctx.strokeRect(160,20,100,100);
    ctx.lineJoin = "miter";
    ctx.strokeRect(300,20,100,100);
</script>
</body>
</html>

其顯示效果如下所示：

 

4.2 設置填充和筆觸樣式

當用fillStyle 或strokeStyle 屬性設置樣式時， 可以用CSS顏色值來指定一種顏色，名稱或顏色模型都可以。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用fillStyle和strokeStyle屬性設置顏色</title>
    <style>
        canvas {border: medium double black;margin: 4px;}
    </style>
</head>
<body>
<canvas id="canvas" width="500" height="140">
    Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
    var ctx = document.getElementById("canvas").getContext("2d");
    var offset = 10;
    var size = 50;
    var count = 5;
    ctx.lineWidth = 3;
    var fillColors = ["black","gray","lightgray","red","blue"];
    var strokeColors = ["rgb(0,0,0)","rgb(100,100,100)","rgb(200,200,200)","rgb(255,0,0)","rgb(0,0,255)"];
    for(var i=0;i<count;i++){
        ctx.fillStyle = fillColors[i];
        ctx.strokeStyle = strokeColors[i];
        ctx.fillRect(i*(offset+size)+offset,offset,size,size);
        ctx.strokeRect(i*(offset+size)+offset,(2*offset)+size,size,size);
    }
</script>
</body>
</html>

此例中，用CSS顏色名和 rgb模型定義了兩個顏色數組。然後再 for迴圈中把這些顏色指派給 fillStyle和 strokeStyle屬性，並調用了 fillRect和 strokeRect方法。

 

 4.3 使用漸變

除了純色，還可以把填充和筆觸樣式設置為漸變色。漸變是兩種或更多顏色之間的漸進轉變。canvas 元素支持兩類漸變：線性和徑向。

這兩個方法都返回一個CanvasGradient對象，它定義了 addColorStop方法。其中參數描述了漸變使用的線條或圓。

(1) 使用線性漸變

線性漸變（linear gradient）指的是沿著一條線設定要用的若幹顏色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>創建線性漸變</title>
    <style>
        canvas {border: medium double black;margin: 4px;}
    </style>
</head>
<body>
<canvas id="canvas" width="500" height="140">
    Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
    var ctx = document.getElementById("canvas").getContext("2d");
    var grad = ctx.createLinearGradient(0,0,500,140);
    grad.addColorStop(0,"red");
    grad.addColorStop(0.5,"white");
    grad.addColorStop(1,"black");
    ctx.fillStyle = grad;
    ctx.fillRect(0,0,500,140);
</script>
</body>
</html>

使用createLinearGradient 方法時，提供的四個值會作為畫布上一條線段的開始和結束坐標。在這個例子中，用坐標描述了一條開始於(0,0)，結束於(500,140)的線段。這些點分別對應畫布的左上角和右下角，如下圖所示：

這條線就代表了漸變。現在可以在createLinearGradient 方法返回的CanvasGradient上使用 addColorStop方法，沿著梯度線添加各種顏色了，就像這樣：

    grad.addColorStop(0,"red");
    grad.addColorStop(0.5,"white");
    grad.addColorStop(1,"black");

addColorStop方法的第一個參數是想要線上段上應用顏色的位置，顏色則由第二個參數指定。線段的起點（此例中是坐標(0,0)）由0這個值代表，1則代表終點。此例中，告訴canvas想讓red（紅色）處於線段起點，white（白色）處於線段中點，而black（黑色）處於線段終點。然後畫布會計算出如何在這些點上逐漸轉變這些顏色。想要指定多少個顏色點都可以。

定義漸變並添加顏色之後，就可以用CanvasGradient對象來設置fillStyle或strokeStyle屬性了，就像這樣：

ctx.fillStyle = grad;

最後，可以繪製一個圖形。此例中，繪製了一個實心的矩形：

ctx.fillRect(0,0,500,140);

從下圖可以看到這個矩形填滿了畫布，並展示出完整的漸變。

(2) 在更小的圖形里使用線性漸變

在定義梯度線時要相對於畫布進行設置，而不是繪製圖形。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在不填滿畫布的圖形中使用漸變</title>
    <style type="text/css">
        canvas {border: thin solid black;margin: 4px;}
    </style>
</head>
<body>
<canvas id="canvas" width="500" height="140">
    Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
    var ctx = document.getElementById(
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 簡單實用的進度條載入組件loader.js
    本文提供一個簡單的方法實現一個流程的進度條載入效果，以便在頁面中可以通過它來更好地反饋耗時任務的完成進度。要實現這個功能，首先要考慮怎樣實現一個靜態的進度條效果，類似下麵這樣的： 這個倒是比較簡單，兩個div即可，bootstrap官方就提供有多種主題的進度條組件。如果自己要用，參照下別人的代碼，寫... ...
  • 一個（偽）MaterialDesign風格的博客園皮膚
    http://images2015.cnblogs.com/blog/877509/201608/877509-20160826005432819-958173773.png ...
  • 輕鬆掌握：JavaScript觀察者模式
    觀察者模式 觀察者模式也叫“訂閱者/發佈者”模式，定義對象間的一種一對多的依賴關係，發佈者可以向所有訂閱者發佈消息。 觀察者模式被廣泛地應用於JavaScript客戶端編程中。所有的瀏覽器事件（mouseover，keypress等）都是使用觀察者模式的例子。 使用這個模式的最主要目的就是促進對象之 ...
  • 移動端頁面滾動穿透問題一些解決方案
    問題描述 最近在做移動項目時遇到一個頁面滾動穿透問題，具體場景是這樣的，在一個可滾動的列表頁中彈出一個蒙層，蒙層中的內容是可滾動的，底部的父頁面理論上是不可滾動的，但是當滑動蒙層內容時，底部父頁面會跟隨滾動，這就是頁面滾動穿透的問題。這個是比較常見的問題，基本都會遇到，Google一下出解決方案也是 ...
  • gulp安裝說明
    1、安裝node-v6.3.0-x64，安裝成功後再點擊node-v6.3.0-x64卸載（點擊remove）。 2、安裝node-v4.4.7-x64。 3、打開cmd命令行，輸入node -v，查看下版本，如果有顯示版本，說明已經安裝成功。 4、輸入npm -v，查看下npm的版本，如果有顯示版 ...
  • JQuery拓展方法之表單數據轉Object—從而ajax post到後臺
    其實今天的分享很簡單，只要你簡單瞭解Jq拓展方法，只要你會遍歷元素，那就能自己封裝出來。在工作中正是因為有了一個個這樣的方法，大大提升了我們的工作效率，減小了失誤次數。但是我們往往又經常使用別人封裝好的方法，這就很不爽了。 希望熱愛技術的園友們今後都能做一個，自己封裝方法，給整個公司用的人。 再也不 ...
  • JavaScript-數組去重由慢到快由繁到簡
    indexOf去重 Array.prototype.unique1 = function() { var arr = []; for (var i = 0; i < this.length; i++) { var item = this[i]; if (arr.indexOf(item) -1) { ...
  • 輕鬆掌握：JavaScript代理模式、中介者模式
    代理模式、中介者模式 代理模式 在面向對象設計中，有一個單一職責原則，指就一個類（對象、函數）而言，應該僅有一個引起它變化的原因。如果一個對象承擔了過多的職責，就意味著它將變得巨大，引起它變化的原因就多，它把這些職責耦合到了一起，這種耦合會導致程式難於維護和重構。 這時候，我們可以把該對象（本體）的 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類