html5 学习4步曲

======================================================
注：本文源代码点此下载
======================================================

1,basic usage:

https://developer.mozilla.org/cn/canvas_tutorial%3abasic_usage

2,绘制图形 drawing shapes:

https://developer.mozilla.org/cn/canvas_tutorial%3adrawing_shapes

3,应用图像 using images:

https://developer.mozilla.org/cn/canvas_tutorial%3ausing_images

4,运用样式与颜色:

https://developer.mozilla.org/cn/canvas_tutorial/applying_styles_and_colors

/*

元素定义:

canvas只有2个属性,width和height,并且都是可选的。并且都可以用dom或者css来设置。

id属性不是专享的,就像标准的htlm标签一样,任何一个html元素都可以指定其 id 值。一般,为元素指定 id 是个不错的主意,这样使得在脚本中应用更加方便。

*/

/*

因为相对较新,有些浏览器并没实现,如firefox 1.0 和 internet explorer,所以我们需要为那些不支持canvas的浏览器提供替用显示内容。

我们只需要直接在canvas元素内插入替用内容即可。不支持canvas的浏览器会忽略canvas元素而直接渲染替用内容,而支持的浏览器则会正常地渲染canvas。例如,我们可以把一些文字或图片填入canvas内,作为替用内容:

*/

current stock pirice :100 rmb

rendering context:

/*

创建的固定尺寸的绘图画面开放了一个或多个渲染上下文(rendering context),我们可以通过它们来控制要显示的内容。我们专注于2d 渲染上,这也是目前唯一的选择,可能在将来会添加基于opengl es 的 3d 上下文。

初始化是空白的,要在上面用脚本画图首先需要其渲染上下文(rendering context),它可以通过 canvas 元素对象的 getcontext 方法来获取,同时得到的还有一些画图用的函数。getcontext() 接受一个用于描述其类型的值作为参数。

*/

/*

上面第一行通过 getelementbyid 方法取得 canvas 对象的 dom 节点。然后通过其 getcontext 方法取得其画图操作上下文。

*/

检查浏览器的支持:

if (canvas.getcontext){

//drawing code here

}

///////

/*

不像 svg,canvas 只支持一种基本形状——矩形,所以其它形状都是有一个或多个路径组合而成。还好,有一组路径绘制函数让我们可以绘制相当复杂的形状。

*/

我们首先看看矩形吧,有三个函数用于绘制矩形的:

fillrect(x,y,width,height) : draws a filled rectangle

strokerect(x,y,width,height) : draws a rectangular outline

clearrect(x,y,width,height) : clears the specified area and makes it fully transparent

/*

cxt.filerect();

cxt.clearrect();

cxt.strokerect();

*/

绘制路径 drawing paths:

beginpath(); closepath(); stroke(); fill();

弧线 arcs

/*

第一步是用 beginpath 创建一个路径。在内存里,路径是以一组子路径(直线,弧线等)的形式储存的,它们共同构成一个图形。每次调用 beginpath,子路径组都会被重置,然后可以绘制新的图形。

第二步就是实际绘制路径的部分.

第三步是调用 closepath 方法,它会尝试用直线连接当前端点与起始端点来关闭路径,但如果图形已经关闭或者只有一个点,它会什么都不做。这一步不是必须的。

最后一步是调用 stroke 或 fill 方法,这时,图形才是实际的绘制到 canvas 上去。stroke 是绘制图形的边框,fill 会用填充出一个实心图形。

*/

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/