HTML5 svg与canvas的异同点有哪些？-白龙seo

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内部完成：

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>

body

{

font-size:70%;

font-family:verdana,helvetica,arial,sans-serif;

}

</style>

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>

<p>把鼠标悬停在下面的矩形上可以看到坐标：</p>

<br />

</body>

</html>

②实例：线条

通过指定从何处开始，在何处结束，来绘制一条线：

<!DOCTYPE HTML>

<html>

<body>

Your browser does not support the canvas element.

</canvas>

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>

Your browser does not support the canvas element.

</canvas>

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>

Your browser does not support the canvas element.

</canvas>

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>

Your browser does not support the canvas element.

</canvas>

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>

<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 的应用都不快）、不适合游戏应用。

首页 > web前端技术 > html5 >

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

相关推荐

猜您喜欢