HTML5 - Canvas - 極客書

HTML5 element<canvas>爲您提供了一種使用JavaScript繪製圖形的簡單而強大的方法。它可以用來繪製圖形、製作照片合成或製作簡單（而不是那麼簡單）的動畫。

這裡有一個簡單的<canvas>元素，它只有兩個特定屬性width和height以及所有核心HTML5屬性，如id、name和class等。

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

您可以使用如下方法在DOM中很容易地找到<canvas>元素;

var canvas = document.getElementById("mycanvas");

讓我們看一個在HTML5文檔中使用<canvas>元素的簡單示例。

Live Demo

<!DOCTYPE HTML>

<html>
   <head>
   
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

這將產生以下結果&負;

The Rendering Context

<canvas>最初是空白的，要顯示某些內容，腳本首先需要訪問呈現上下文並在其上繪製。

canvas元素有一個名爲getContext的DOM方法，用於獲取呈現上下文及其繪圖函數。此函數接受一個參數，即上下文類型2d。

下面是獲取所需上下文的代碼，同時檢查瀏覽器是否支持<canvas>element−

var canvas  = document.getElementById("mycanvas");

if (canvas.getContext) {   
   var ctx = canvas.getContext('2d');   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}

Browser Support

最新版本的Firefox、Safari、Chrome和Opera都支持HTML5 Canvas，但IE8本身並不支持Canvas。

您可以使用explorercanvas通過Internet Explorer獲得畫布支持。您只需要按照以下方式包含這個JavaScript−

<!--[if IE]><script src = "excanvas.js"></script><![endif]-->

HTML5 Canvas Examples

本教程將介紹與HTML5<canvas>元素相關的以下示例。

Sr.No.	Examples & Description
1	Drawing Rectangles 了解如何使用HTML5<canvas>元素繪製矩形
2	Drawing Paths 了解如何在HTML5<canvas>元素中使用路徑生成形狀
3	Drawing Lines 了解如何使用HTML5<canvas>元素繪製線條
4	Drawing Bezier 了解如何使用HTML5<canvas>元素繪製貝塞爾曲線
5	Drawing Quadratic 了解如何使用HTML5<canvas>元素繪製二次曲線
6	Using Images 了解如何將圖像與HTML5<canvas>元素一起使用
7	Create Gradients 了解如何使用HTML5<canvas>元素創建漸變
8	Styles and Colors 了解如何使用HTML5<canvas>元素應用樣式和顏色
9	Text and Fonts 學習如何使用不同的字體和大小繪製令人驚嘆的文本。
10	Pattern and Shadow 學習如何繪製不同的圖案和陰影。
11	Canvas States 了解如何在畫布上執行複雜繪圖時保存和還原畫布狀態。
12	Canvas Translation 此方法用於將畫布及其原點移動到網格中的其他點。
13	Canvas Rotation 此方法用於圍繞當前原點旋轉畫布。
14	Canvas Scaling 此方法用於增加或減少畫布網格中的單位。
15	Canvas Transform 這些方法允許直接修改轉換矩陣。
16	Canvas Composition 此方法用於屏蔽畫布上的某些區域或清除區域。
17	Canvas Animation 了解如何使用HTML5畫布和JavaScript創建基本動畫。極客書 © 2015-2020 .