首页 > web前端技术 > html5 > HTML5 svg与canvas的异同点有哪些?

HTML5 svg与canvas的异同点有哪些?

1.HTML5 Canvas
(1)什么是Canvas?
HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域,可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
 
(2)创建Canvas元素
向HTML5页面添加canvas元素。规定元素的id宽度和高度:<canvas id="myCanvas" width="200" height="100"></canvas>
 
(3)通过 JavaScript 来绘制
canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
①JavaScript使用id来寻找canvas元素:var c=document.getElementById("myCanvas");
②然后,创建context对象:var cxt=c.getContext("2d"); getContext("2d") 对象是内建的HTML5对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
③接下来的两行代码绘制一个红色的矩形:cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75); fillStyle方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
 
(4)理解坐标
fillRect方法拥有参数 (0,0,150,75)。意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。画布的X和Y坐标用于在画布上对绘画进行定位。
 
(5)Canvas实例
①把鼠标悬停在矩形上可以看到坐标
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css"> 
body
{
font-size:70%;
font-family:verdana,helvetica,arial,sans-serif;
}
</style>
<script type="text/javascript"> 
function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}
function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
</script>
</head>
<body style="margin:0px;">
<p>把鼠标悬停在下面的矩形上可以看到坐标:</p>
<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
<br />
<br />
<br />
<div id="xycoordinates"></div>
</body>
</html>
 
②实例:线条
通过指定从何处开始,在何处结束,来绘制一条线:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
</body>
</html>
 
③实例:圆形
通过规定尺寸、颜色和位置,来绘制一个圆:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>
 
④实例:渐变
使用您指定的颜色来绘制渐变背景:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
</body>
</html>
 
⑤实例:图像
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0,0);
</script>
</body>
</html>
 
2.HTML5的内联SVG
 
(1)什么是SVG?
SVG指可伸缩矢量图形(Scalable Vector Graphics),用于定义用于网络的基于矢量的图形,使用XML格式定义图形,图像在放大或改变尺寸的情况下其图形质量不会有损失,是万维网联盟的标准。
 
(2)SVG的优势
与其他图像格式相比(比如JPEG和GIF),使用SVG的优势在于:SVG图像可通过文本编辑器来创建和修改、SVG图像可被搜索、索引、脚本化或压缩、SVG是可伸缩的、SVG图像可在任何的分辨率下被高质量地打印、SVG可在图像质量不下降的情况下被放大。
 
(3)浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。
 
(4)把SVG直接嵌入HTML页面
在HTML5中,能够将SVG元素直接嵌入HTML页面中:
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
 
3.HTML 5  Canvas vs. SVG
Canvas和SVG都允许您在浏览器中创建图形,但是它们在根本上是不同的。
(1)SVG
SVG是一种使用XML描述2D图形的语言。SVG基于XML,这意味着SVG DOM中的每个元素都是可用的。可以为某个元素附加JavaScript事件处理器。在SVG中,每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化,那么浏览器能够自动重现图形。
 
(2)Canvas
Canvas通过JavaScript来绘制2D图形。
Canvas是逐像素进行渲染的。
在canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
 
(3)Canvas与SVG的比较
下表列出了 canvas 与 SVG 之间的一些不同之处。
①Canvas
依赖分辨率、不支持事件处理器、弱的文本渲染能力、能够以.png或.jpg格式保存结果图像、最适合图像密集型的游戏,其中的许多对象会被频繁重绘。
 
②SVG
不依赖分辨率、支持事件处理器、最适合带有大型渲染区域的应用程序(比如谷歌地图)、复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)、不适合游戏应用。

相关推荐