当前位置: 代码迷 >> HTML/CSS >> HTML5学习札记(二)-Canvas、SVG
  详细解决方案

HTML5学习札记(二)-Canvas、SVG

热度:360   发布时间:2013-07-08 14:13:00.0
HTML5学习笔记(二)-Canvas、SVG

Canvas与SVG(Scalable Vector Graphics)的区别:

  • Canvas是一个位图画布,其上绘制的图形不可缩放;SVG是矢量图可以放大缩小。
  • Canvas绘制出的对象不属于页面DOM结构或者任何命名空间;SVG支持单机检测(能检测鼠标单机了图像上哪个对象)
  • Canvas不需要存储图像中的对象所以性能非常好。

一、Canvas

1、元素:<canvas></canvas>

?

2、坐标:左上角坐标为原点,即x=0,y=0的点。

?

3、替代内容。

? ? ? 在不支持canvas的浏览器上需要显示提示或替代内容。如:

<canvas>
    Update your browser to enjoy canvas
</canvas>

?

?4、检测浏览器支持情况

try {
    document.createElement("canvas").getContext("2d");
    document.getElementById("support").innerHTML = 
        "HTML5 Canvas is supported in your browser.";
} catch(e) {
    document.getElementById("support").innerHTML = 
        "HTML5 Canvas is not supported in your browser.";
}

?

?5、划线

<canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas>

?

<script>
	function drawDiagonal() {
		//取得canvas元素及其绘图上下文
		var canvas = document.getElementById('diagonal');
		var context = canvas.getContext('2d');
		
		//用绝对坐标来创建一条路径
		context.beginPath();
		context.moveTo(70,140);
		context.lineTo(140, 70);
		
		//将这条线绘制在canvas上
		context.stroke();
	}
	window.addEventListener("load", drawDiagonal, true);
</script>

?一段简单的代码展示了HTML5 Canvas API的重要流程。

首先获取canvas对象的访问权,接着获取canvas二维上下文。

接下来调用3个方法beginPath、moveTo、lineTo传入线的起点和终点坐标。

方法moveTo和lineTo实际上并不画线,在结束canvas操作的时候,通过context.stroke()方法完成线的绘制。

?

6、变换

context.translate(x, y);

将图平移到x,y坐标处。

canvas绘图一般都从0,0点开始,然后平移到应在的位置。因为canvas的缩放、平移、旋转等操作都是已原点为基准点。

绘制前先context.save()保存当前绘图状态,最后再context.restore()恢复原有绘图状态。这样本次绘制所做的缩放旋转就不会影响下次绘制的内容了。

?

7、路径

moveTo(x, y):不绘制,只是移动到目标坐标x,y。

lineTo(x, y):不仅移动到新坐标x,y,而且在两坐标间画一条直线。

?

8、其他操作

canvas画图可以写一本书,并且确实有很多相关方面的书。这里就不详细记录了。本书后面介绍了一些画线样式、填充区域、绘制曲线、插入图片、渐变、旋转、插入文本、阴影等效果操作。

?

9、像素数据

Canvas API最有用的特性之一是允许开发人员直接访问canvas底层像素数据,这种访问是双向的。

获取像素数据:

conext.getImageData(sx, sy, sw, sh) 这个函数返回当前canvas状态并以数值数组的方式显示。

将图像数据应用于canvas:

context.putImageData(imagedata, dx, dy) dx,dy为偏移量。

创建空图像数据:context.createImagedData(sw, sh)

还有一种将图像数据转成文本格式的方法:canvas.toDataURL(type)

传入开发者期望的由canvas数据生成的图像类型为参数,如:image/png或image/jpeg

?

10、Canvas安全机制

如果canvas中的图像来自其他域,就会抛出安全异常。

?

11、进阶功能之全页玻璃窗

可以将canvas应用于这个浏览器窗口或者其中一部分上――这种技术通常被称作“玻璃窗”。一个应用是获取页面中所有DOM元素的绝对位置后,创建循序渐进的帮助功能,从而引导Web应用的用户,一步一步地教他们学会操作。因为canvas会阻塞后续的时间访问。

?

二、SVG

SVG内容就是一段定义严格的XML代码。其中的元素可以被js访问,文本可以被选中(canvas中的不行,因为他们是图形)。也有一些旋转、渐变的效果操作。

SVG长期以来都是矢量图形的标准格式,所以在图像处理方面有很多工具可以使用。比如开源的svg-edit(https://code.google.com/p/svg-edit/)