HTML5画布与SVG

来源：互联网发布：在手机淘宝购物的步骤编辑：程序博客网时间：2024/05/16 04:46

HTML5 Canvas

什么是Canvas

HTML5的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建Canvas元素

向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度：

’

通过JS绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

var c=document.getElementById("myCanvas"); //JavaScript使用 id来寻找 canvas元素：

var cxt=c.getContext("2d"); //然后，创建 context 对象。对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

//绘制一个红色的矩形：

cxt.fillStyle="#FF0000"; //将其染成红色

cxt.fillRect(0,0,150,75); //规定了形状、位置和尺寸

</script>

Canvas的DOM元素

GetContext()

返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型（2 维、3 维）提供不同的环境。当前，唯一支持的是 "2d"，它返回一个 CanvasRenderingContext2D 对象，该对象实现了一个画布所使用的大多数方法。

如果 <canvas> 标签扩展到支持 3D 绘图，getContext() 方法可能允许传递一个 "3d" 字符串参数。

理解坐标

上面的 fillRect 方法拥有参数 (0,0,150,75)。意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。

代码实例

把鼠标悬停在矩形上显示坐标

<!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"); //创建context对象，样式为2D

cxt.moveTo(10,10); //起点为(10，10)

cxt.lineTo(150,50); //绘制直线至(150,50)

cxt.lineTo(10,50);//绘制直线至(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);//x轴，y轴，半径，

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); //开始x坐标，开始y坐标，结束x坐标，结束y坐标。

</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); //图片，显示x坐标，显示y坐标

</script>

</body>

</html>

HTML5内敛SVG

什么是SVG

l SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
l SVG 用于定义用于网络的基于矢量的图形
l SVG 使用 XML 格式定义图形
l SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
l SVG 是万维网联盟的标准

SVG的优势

与其他图像格式相比（比如 JPEG 和GIF），使用 SVG 的优势在于：

l SVG 图像可通过文本编辑器来创建和修改
l SVG 图像可被搜索、索引、脚本化或压缩
l SVG 是可伸缩的
l SVG 图像可在任何的分辨率下被高质量地打印
l SVG 可在图像质量不下降的情况下被放大

例程

绘制五角星

<!DOCTYPE html>

<html>

<body>

<polygon points="100,10 40,180 190,60 10,60 160,180"

style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />

</svg>

</body>

</html>

画布与SVG对比

Canvas：

Canvas 通过JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

l 依赖分辨率
l 不支持事件处理器
l 弱的文本渲染能力
l 能够以 .png 或 .jpg 格式保存结果图像
l 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG：

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

l 不依赖分辨率
l 支持事件处理器
l 最适合带有大型渲染区域的应用程序（比如谷歌地图）
l 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

0 0