HTML5中怎么繪制圖形

本篇內容主要講解“HTML5中怎么繪制圖形”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“HTML5中怎么繪制圖形”吧!

HTML5中可以繪制圖形的元素：1、“canvas”元素，可通過JavaScript腳本來動態繪制圖形；2、“SVG”元素，可定義用于網絡的基于矢量的圖形，使用XML格式定義圖形。

本教程操作環境：windows7系統、HTML5版、Dell G3電腦。

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

SVG

• SVG 是一種使用 XML 描述 2D 圖形的語言。

• SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。

• 在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。

Canvas

• Canvas 通過 JavaScript 來繪制 2D 圖形。

• Canvas 是逐像素進行渲染的。

• 在 canvas 中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。

一、Canvas

canvas是HTML5中新增一個HTML5標簽與操作canvas的javascript API，它可以實現在網頁中完成動態的2D與3D圖像技術。<canvas> 標記和 SVG以及 VML 之間的一個重要的不同是，<canvas> 有一個基于 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。SVG 繪圖很容易編輯與生成，但功能明顯要弱一些。

canvas可以完成動畫、游戲、圖表、圖像處理等原來需要Flash完成的一些功能。

1、創建canvas

<canvas  id="draw" width="600" height="600"></canvas>

　在html中創建一個canvas標簽，最好再在標簽本身中設置寬高，如果用其他方式設置寬高會有0.5的位移差

var draw=document.getElementById("draw");
//獲取畫布元素
var draws=draw.getContext("2d");
//給畫布一個繪制環境，2d表示在2d環境下繪制
//draws返回的是一個對象

2、繪制

//繪制線條

//設置線寬
draws.lineWidth = 10;
//設置線的顏色
draws.strokeStyle = "blue";
            
draws.moveTo(0,0);  //移動畫筆到0,0點
draws.lineTo(300,300);  //畫線到300,300的位置
draws.stroke();  //執行描邊

//繪制矩形
draws.strokeRect(x,y,width,height) //繪制一個邊框矩形
draws.fillRect(x,y,width,height) //繪制一個填充矩形

draws.clearRect(x,y,width,height) //清除一個矩形


//繪制圓形
draws.arc(x,y,radius,startAngle,endAngle,anticlockwise)
//arc方法用來繪制一段圓弧路徑，以(x,y)圓心位置radius為半徑、startAngle為起始弧度、
//endAngle為終止弧度來，而在畫圓弧時的旋轉方向則由最后一個參數 anticlockwise 來指定，
//如果為 true 就是逆時針，false 則為順時針，Math.PI * 2 剛好為一周。

//繪制圖像 
//在html中加入一個img標簽 
<img src="1.jpg" id="pic"/>
//在JS中...
//需要將頁面中的圖片都加載完之后執行
window.onload=function(){



//繪制文字

//描邊文字
draws.font="50px microsoft yahei"

//設置描邊字體顏色
draws.strokeText("Hello",20,100) 

//設置描邊文字內容，和X坐標Y坐標

//填充文字

draws.fillStyle="red"
//設置填充字體顏色
draws.fillText("Hello",20,200); 

//設置填充文字內容，和X坐標Y坐標

3、理解一些canvas方法

draws.beginpath()
draws.closepath()
// 二者同時出現  將繪制路徑閉合 ,自動將路徑閉合


draws.save()
draws.restore()
//二者成對出現 中間的屬性樣式只影響內部 不影響外部


//translate()
draws.strokeRect(0, 0, 150, 150);

draws.translate(150, 150);

draws.strokeRect(0, 0, 150, 150); //被平移的元素
//平移后這個被平移的元素的坐標就會改變


//rotate()

draws.rotate(0.2);

draws.strokeRect(75, 75, 75, 75); //根據畫布的0，0點旋轉

二、SVG

SVG可縮放矢量圖形（Scalable Vector Graphics）是基于可擴展標記語言（XML），用于描述二維矢量圖形的一種圖形格式。SVG是W3C("World Wide Web ConSortium" 即 " 國際互聯網標準組織")在2000年8月制定的一種新的二維矢量圖形格式，也是規范中的網絡矢量圖形標準。SVG嚴格遵從XML語法，并用文本格式的描述性語言來描述圖像內容，因此是一種和圖像分辨率無關的矢量圖形格式。SVG 于 2003 年 1 月 14 日成為 W3C 推薦標準。

特點：

1、任意放縮

用戶可以任意縮放圖像顯示，而不會破壞圖像的清晰度、細節等。

2、文本獨立

SVG圖像中的文字獨立于圖像，文字保留可編輯和可搜尋的狀態。也不會再有字體的限制，用戶系統即使沒有安裝某一字體，也會看到和他們制作時完全相同的畫面。

3、較小文件

總體來講，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下載也很快。

4、超強顯示效果

SVG圖像在屏幕上總是邊緣清晰，它的清晰度適合任何屏幕分辨率和打印分辨率。

5、超級顏色控制

SVG圖像提供一個1600萬種顏色的調色板，支持ICC顏色描述文件標準、RGB、線X填充、漸變和蒙版。

6、交互X和智能化。SVG面臨的主要問題一個是如何和已經占有重要市場份額的矢量圖形格式Flash競爭的問題，另一個問題就是SVG的本地運行環境下的廠家支持程度。

瀏覽器支持：

Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。
IE8和早期版本都需要一個插件 - 如Adobe SVG瀏覽器，這是免費提供的。

1、引入方法

方法1：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
繪制圖形
</svg>

• xmlns:命名空間

• version：版本

方法2：

<img src="01.svg" alt="">

2、繪制

<svg>

//繪制直線

 <line x1="0" y1="0" x2="500" y2="500" style="stroke:rgb(0,0,255);stroke-width:3"></line>

//參數：
//x1 屬性在 x 軸定義線條的開始
//y1 屬性在 y 軸定義線條的開始
//x2 屬性在 x 軸定義線條的結束
//y2 屬性在 y 軸定義線條的結束

//繪制圓形、橢圓

<circle r="50" cx="110" cy="60" fill="lightskyblue"></circle>

<ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:dodgerblue;stroke-width:5"><ellipse/>

//參數
//CX屬性定義的橢圓中心的x坐標
//CY屬性定義的橢圓中心的y坐標
//RX屬性定義的水平半徑
//RY屬性定義的垂直半徑

//繪制文本

<text x="0" y="50" fill="blue" style="font-size:30px; font-family: 'microsoft yahei';">My Text</text>


//繪制矩形

 <rect x="40" y="60" width="260" height="260" style="fill:blue;stroke:pink;stroke-width:5;

//繪制圖像

<image x="20" y="20" width="100" height="80" xlink:href="./img/1.jpg"></image>

//繪制路徑 

<path d="M70 0 L100 150 L40 150 Z" stroke="plum" fill="plum" ></path>

//參數
//M是起點坐標 L是相鄰點坐標 Z讓路徑構成閉合回路
//H代表水平的線條 默認y軸上的值一樣
//V 代表垂直的線條 默認x軸上的值一樣/
//A 后面跟七個值

//繪制多邊形

<Polygon points=””></polygon>

//points：多邊形的點

//繪制折線

<polyline points=”” ></polyline>

//points：折線的點
 
</svg>

到此，相信大家對“HTML5中怎么繪制圖形”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！