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/)