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
登录后复制
在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标签//在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：
绘制图形
登录后复制
xmlns:命名空间
version：版本
方法2：
登录后复制
2、绘制
//绘制直线 //参数：//x1 属性在 x 轴定义线条的开始//y1 属性在 y 轴定义线条的开始//x2 属性在 x 轴定义线条的结束//y2 属性在 y 轴定义线条的结束//绘制圆形、椭圆//参数//CX属性定义的椭圆中心的x坐标//CY属性定义的椭圆中心的y坐标//RX属性定义的水平半径//RY属性定义的垂直半径//绘制文本My Text//绘制矩形 //绘制路径 //参数//M是起点坐标 L是相邻点坐标 Z让路径构成闭合回路//H代表水平的线条 默认y轴上的值一样//V 代表垂直的线条 默认x轴上的值一样///A 后面跟七个值//绘制多边形//points：多边形的点//绘制折线//points：折线的点
登录后复制
相关推荐：《html视频教程》
以上就是HTML5中哪个元素可以绘制图形的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2942089.html
