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圖像技術。 標籤和 SVG以及 VML 之間的一個重要的差異是， 有一個基於 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="/static/imghwm/default1.png" data-src="1.jpg" class="lazy" alt="HTML5中哪個元素可以繪製圖形" >
//在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，火狐，GoogleChrome，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="/static/imghwm/default1.png"  data-src="01.svg"  class="lazy"   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: &#39;microsoft yahei&#39;;">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>

相關推薦：《html影片教學》

以上是HTML5中哪個元素可以繪製圖形的詳細內容。更多資訊請關注PHP中文網其他相關文章！