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

創(chuàng)新互聯(lián)建站自2013年起，先為輝南等服務(wù)建站，輝南等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為輝南企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

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

SVG

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

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

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

Canvas

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

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

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

一、Canvas

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

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

1、創(chuàng)建canvas

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

在html中創(chuàng)建一個canvas標(biāo)簽，最好再在標(biāo)簽本身中設(shè)置寬高，如果用其他方式設(shè)置寬高會有0.5的位移差

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

2、繪制

//繪制線條

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

//繪制矩形
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為終止弧度來，而在畫圓弧時的旋轉(zhuǎn)方向則由最后一個參數(shù) anticlockwise 來指定，
//如果為 true 就是逆時針，false 則為順時針，Math.PI * 2 剛好為一周。

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



//繪制文字

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

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

//設(shè)置描邊文字內(nèi)容，和X坐標(biāo)Y坐標(biāo)

//填充文字

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

//設(shè)置填充文字內(nèi)容，和X坐標(biāo)Y坐標(biāo)

3、理解一些canvas方法

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


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


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

draws.translate(150, 150);

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


//rotate()

draws.rotate(0.2);

draws.strokeRect(75, 75, 75, 75); //根據(jù)畫布的0，0點旋轉(zhuǎn)

二、SVG

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

特點：

1、任意放縮

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

2、文本獨立

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

3、較小文件

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

4、超強顯示效果

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

5、超級顏色控制

SVG圖像提供一個1600萬種顏色的調(diào)色板，支持ICC顏色描述文件標(biāo)準(zhǔn)、RGB、線X填充、漸變和蒙版。

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

瀏覽器支持：

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>

//參數(shù)：
//x1 屬性在 x 軸定義線條的開始
//y1 屬性在 y 軸定義線條的開始
//x2 屬性在 x 軸定義線條的結(jié)束
//y2 屬性在 y 軸定義線條的結(jié)束

//繪制圓形、橢圓

<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/>

//參數(shù)
//CX屬性定義的橢圓中心的x坐標(biāo)
//CY屬性定義的橢圓中心的y坐標(biāo)
//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>

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

//繪制多邊形

<Polygon points=””></polygon>

//points：多邊形的點

//繪制折線

<polyline points=”” ></polyline>

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

到此，相信大家對“HTML5中怎么繪制圖形”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

本文名稱：HTML5中怎么繪制圖形
網(wǎng)站地址：http://aaarwkj.com/article4/iijiie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、營銷型網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、定制網(wǎng)站、網(wǎng)站排名、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)