HTML5 Canvas 第一篇

放寒假在家,也断断续续的休息了好长时间了.原来一直想等键盘到的时候练练打打代码,但今儿晚上在优设王上看到了一款在线编辑Html5的利器."Liveweave" 网站设计的很漂亮,而且配色很符合常用编辑器的配色,一下就喜欢了.

正好现在也是开始学Html5 就用用这个吧. 纯新手自我学习哈`

1.1 What is Canvas?

使用Canvas元素时,它会创建一块矩形区域.默认情况下宽为300像素,高为140像素,但也可自设.

基本的Canvas元素

页面加入Canvas元素后,我们就可以通过javascript来控制它.可以在其中添加图片、线条、文字,也可以在里面绘图,甚至高级动画.

使用Canvas编程,首先要获取其上下文(context).接着在其中执行动作,最后将这些动作应用到上下文中. 类似于数据库,开发人员先发起一个事务,然后执行某些操作,最后提交这些事务.

1.2 Canvas 座标

Canvas的座标是从左上角开始算起,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角(x=0,y=0)的点称为原点.

1.3 不适用Canvas的情况

如果其他元素已经够用了,就不应该再使用Canvas元素.例如H1 H2等

1.4 替代内容

访问页面时,如果浏览器不支持Canvas元素,或者不支持HTML5 Canvas API中的某些特性,那么开发人员最好准备一份替代代码.例如,一些文字或图片告诉访问者,使用最新的浏览器可以获得最佳的浏览效果.

在Canvas元素中使用替代内容

Update your browser to enjoy canvas!

</canvas>

同样还可以使用图片,都会在浏览器不支持的情况下显示出来.

1.5 Css

同大多HTML元素一样,canvas元素也可以通过应用CSS的方式来增加边框、设置内外边距等,默认的CSS属性还可以被canvas内的元素继承.

2.1 使用HTML5 Canvas API

按照例子,使用 canvas API创建一幅类似于LOGO的图像,森林场景,有树和可以长跑比赛的赛道.

2.2 检测浏览器的支持情况

在创建之前,要确保浏览器能够支持它.

检测浏览器的支持情况

	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.";
	}

上面的代码创建一个canvas对象,并且获取其上下文.如果发生错误,则捕获异常,进而得知浏览器不支持.

2.3 页面中加入Canvas

带实心边框的canvas元素

增加了值为"diagonal"d的ID特性.

绘制对角线

<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的重要流程.
首先通过特定的ID获取对canvas的访问权.接着定义一个context变量,调用canvas对象的getContext方法,传入希望使用的canvas类型.通过"2d"来获取一个上下文.
代码中调用了三个方法-beginPath、moveTo和lineTo,传入这条线的起点、终点的座标.通过context.stroke()方法来完成线条的绘制.
如图  
应该明白,我们实际操作的是画布所提供的上下文对象.beginPath、moveTo、以及lineTo这些函数都不会直接修改canvas的展示结果.只有当对路径应用绘制(stroke)或填充(fill)方法时,结果才会显示出来.
0.0额.. 一不小心,尽然这么晚了.应该洗洗睡了,明儿继续学习吧.明儿应该是绘制图像的另一种方式---变换.(ps 无语了 不知道这个后面是怎么搞得 诶)