html5中如何绘制基本

html5中是怎么实现绘制图形？

html5中可以实现绘画图形的功能，需要注意的是html5只提供2D，不提供3D绘画功能。canvas元素是H5总新增的元素，它用来专门绘制图形。你也可以把canvas元素理解成一块“画布”，我们可以在其中绘制图形。在canvas元素中绘画不是拿鼠标来绘制图形，实际上在H5完成绘画功能，不仅仅需要canvas元素，而且需要JavaScript脚本来配合才能完成绘制图形。所以说把html5中的canvas元素理解成画布是是合适不过的。

html5中的canvas元素

canvas元素必须要指定id、width（宽）、height（高）属性，虽然canvas元素是H5中用来绘制的图形，但是它的放置放和其他的元素没有区别。比如说canvas id="myCanvas" width="200" height="100"是放置了一个200*100的canvas元素。

html5中的常用的绘制图形

绘制矩形

创建canvas元素→取得上下文（使用canvas对象的getcontent方法获得上下文）→填充绘制边框→设定样式→指定线宽、颜色。代码如下图：

可以用clearRect方法擦除指定区域的图形，使矩形区域颜色变透明，context.clearRect(x,y,width,height)。

绘制圆形

绘制圆形要比矩形复杂一点，需要使用到路径，创建图形路径→关闭路径→调用绘制方法、路径。代码如下：

cxt.beginPath()是开始创建路径，有几次是循环创建路径，每次开始都需要调用beginPath()函数。

cxt.arc(70,18,15,0,Math.PI*2,true)是是创建路径，使用了arc（）方法，它的语法如下：

cxt.closePath()cxt.fill()关闭绘画路径后调用绘制路径。

亲爱的提问朋友，html5中常用的两种绘图元素是：Canvas和SVG。

他们都是html5中支持在画布上绘制图形和放入图片的。

Canvas 是H5新出来的标签<canvas></canvas>

Canvas画布，利用JavaScript在网页绘制图像

在标签中给上宽高：<canvas width="800" height="800"></canvas> 

SVG 可缩放矢量图形（Scalable Vector Graphics），基于可扩展标记语言XML  出来的时间比较老

SVG 用来定义用于网格的基于矢量的图形。

---