在HTML5中常用的兩種繪圖元素分別是什么？

親愛的提問朋友，html5中常用的兩種繪圖元素是：Canvas和SVG。

他們都是html5中支持在畫布上繪制圖形和放入圖片的。

Canvas 是H5新出來的標簽canvas/canvas

Canvas畫布，利用JavaScript在網(wǎng)頁繪制圖像

在標簽中給上寬高：canvas width="800" height="800"/canvas?

SVG 可縮放矢量圖形（Scalable Vector Graphics），基于可擴展標記語言XML? 出來的時間比較老

SVG 用來定義用于網(wǎng)格的基于矢量的圖形。

如何運用HTML5畫圖

工具/材料

Sublime Text

01

首先要準備一個畫布，如下圖所示，在HTML5中我們用canvas來表示畫布

02

然后我們在script腳本中獲取畫布對象，如下圖所示，運用JS的getElementById方法即可

03

接下來我們通過畫布對象的getContext方法來獲取上下文2d對象，如下圖所示，我們要操作的內(nèi)容都在里面

04

然后我們給2d上下文填充背景色，如下圖所示，運用上下文的fillStyle屬性即可

05

接下來，運用上下文的fillRect方法來畫一個矩形，注意里面的四個值就是四個坐標，如下圖所示

06

最后我們運行界面程序，你會看到如下圖所示的紅色矩形樣例，你可要和上面的坐標對應一下

07

當然2d上下文中還可以畫其他的圖形，如下圖所示的圓形，大家根據(jù)自己的需要應用即可

html5中如何繪制基本

html5中是怎么實現(xiàn)繪制圖形？

html5中可以實現(xiàn)繪畫圖形的功能，需要注意的是html5只提供2D，不提供3D繪畫功能。canvas元素是H5總新增的元素，它用來專門繪制圖形。你也可以把canvas元素理解成一塊“畫布”，我們可以在其中繪制圖形。在canvas元素中繪畫不是拿鼠標來繪制圖形，實際上在H5完成繪畫功能，不僅僅需要canvas元素，而且需要JavaScript腳本來配合才能完成繪制圖形。所以說把html5中的canvas元素理解成畫布是是合適不過的。

html5中的canvas元素

canvas元素必須要指定id、width（寬）、height（高）屬性，雖然canvas元素是H5中用來繪制的圖形，但是它的放置放和其他的元素沒有區(qū)別。比如說canvas id="myCanvas" width="200" height="100"是放置了一個200*100的canvas元素。

html5中的常用的繪制圖形

繪制矩形

創(chuàng)建canvas元素→取得上下文（使用canvas對象的getcontent方法獲得上下文）→填充繪制邊框→設定樣式→指定線寬、顏色。代碼如下圖：

可以用clearRect方法擦除指定區(qū)域的圖形，使矩形區(qū)域顏色變透明，context.clearRect(x,y,width,height)。

繪制圓形

繪制圓形要比矩形復雜一點，需要使用到路徑，創(chuàng)建圖形路徑→關閉路徑→調(diào)用繪制方法、路徑。代碼如下：

cxt.beginPath();是開始創(chuàng)建路徑，有幾次是循環(huán)創(chuàng)建路徑，每次開始都需要調(diào)用beginPath()函數(shù)。

cxt.arc(70,18,15,0,Math.PI*2,true);是是創(chuàng)建路徑，使用了arc（）方法，它的語法如下：

cxt.closePath();cxt.fill();關閉繪畫路徑后調(diào)用繪制路徑。