當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

H5_canvas与svg

發布時間：2024/10/12 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 H5_canvas与svg 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Canvas

什么是canvas:

　　HTML5 的 canvas 元素是使用 JavaScript 在網頁上繪制圖像，canvas 元素本身是沒有繪圖能力的，所有的繪制工作必須在 JavaScript 內部完成。它會在網頁中繪制一個畫布，畫布是一個矩形區域，你可以控制到畫布的每一個像素，繪制各種圖像。它提供多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

　　2.Canvas的用法:

　　1)?創建 Canvas 元素

　　　　在 HTML5 頁面添加 canvas 元素，規定元素的 id、寬度和高度；（canvas的樣式要寫在行內樣式中,否則不會生效）

?　　2)?如何通過 JavaScript 來繪制:

　　　　eg:通過js獲取canvas元素 ,getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法，可以理解為繪圖工具。創建繪圖工具(ctx),通過繪圖工具在畫布中繪制矩形,并在繪制前為其添加填充樣式:

?　　3）繪制的坐標:

??Canvas繪制圖像的參考原點為左上角。也就是畫布的（0,0）點為畫布的左上角，向左x軸坐標增加，向下y坐標增加。超出畫布的部分將不會顯示。

　　3.Canvas的常用一些方法:

　　　　之前寫過關于canvas的具體使用方法和兩個實例，就不再詳述。請移步。。。學習記錄(一)之h5_canvas

Svg:

　　1.什么是svg:

? 　　　　SVG 用于定義網絡的基于矢量的圖形，指可伸縮矢量圖形 (Scalable Vector Graphics)，與canvas不同它使用的是?XML 格式來定義圖形，因為它繪制的圖像為矢量圖，所以在放大或改變尺寸的情況下其圖形質量不會有損失。

　　2.Svg的用法

　　　1）SVG 文件可通過以下標簽嵌入 HTML 文檔：<embed>、<object> 或者 <iframe>。

　　　　　　<embed>、<object>會有版本和規范問題，<iframe> 標簽可工作在大部分的瀏覽器中。所以我們一般使用<iframe>標簽引入就可以了。

語法：

　但在 HTML5 中，能夠將 SVG 元素直接嵌入 HTML 頁面中：

　　實例

　　xmlns為名命空間，polygon為創建了一個多邊形圖片，style則負責設置圖片的樣式；

<!DOCTYPE html><html><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"><polygon points="100,10 40,180 190,60 10,60 160,180"style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /></svg></body></html>

　　2)一些預定義的形狀元素，可被開發者使用和操作：

矩形 <rect>

代碼解釋：

x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到瀏覽器窗口左側的距離是 0px）

y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px）rx 和 ry 屬性可使矩形產生圓角。

CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的范圍是：0 - 1）

CSS 的 stroke-opacity 屬性定義筆觸顏色的透明度（合法的范圍是：0 - 1）

圓形 <circle>

　　代碼解釋：

cx 和 cy 屬性定義圓點的 x 和 y 坐標。如果省略 cx 和 cy，圓的中心會被設置為 (0, 0)

r 屬性定義圓的半徑。

橢圓 <ellipse>

代碼解釋：

cx 屬性定義圓點的 x 坐標

cy 屬性定義圓點的 y 坐標

rx 屬性定義水平半徑

ry 屬性定義垂直半徑

線 <line>

代碼解釋：

x1 屬性在 x 軸定義線條的開始

y1 屬性在 y 軸定義線條的開始

x2 屬性在 x 軸定義線條的結束

y2 屬性在 y 軸定義線條的結束

多邊形 <polygon>

代碼解釋：

points 屬性定義多邊形每個角的 x 和 y 坐標

折線 <polyline>

路徑 <path>

代碼解釋：

上面的例子定義了一條路徑，它開始于位置 250 150，到達位置 150 350，然后從那里開始到 350 350，最后在 250 150 關閉路徑。

<path> 標簽用來定義路徑。

下面的命令可用于路徑數據：

- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath

注釋：以上所有命令均允許小寫字母。大寫表示絕對定位，小寫表示相對定位。

Canvas和svg比較

1.Canvas 和 SVG 都允許您在瀏覽器中創建圖形，但是它們在根本上是不同的。

　　1）SVG

　　SVG 是一種使用 XML 描述 2D 圖形的語言。基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。

　　2)Canvas

　　Canvas 通過 JavaScript 來繪制 2D 圖形。Canvas 是逐像素進行渲染的。在 canvas 中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。

2.Canvas 與 SVG 的不同之處

1）Canvas

- 1）依賴分辨率
- 2）不支持事件處理器
- 3）弱的文本渲染能力
- 4）能夠以 .png 或 .jpg 格式保存結果圖像
- 5）最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪

2）SVG

1）不依賴分辨率

2）支持事件處理器

3）最適合帶有大型渲染區域的應用程序（比如谷歌地圖）

4）復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）

5) 不適合游戲應用

總結

以上是生活随笔為你收集整理的H5_canvas与svg的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。