html5学习笔记---03. Canvas简介,Canvas的使用方法

2013/6/10
03.　Canvas简介
a.创梦技术qq交流群：CreDream：251572072
-------------------------
a.Canvas 元素是HTML5的新元素之一，用于在网页上绘制图形，相当于在 HTML 中嵌
  入了一张画布，这样就可以直接在HTML 上进行图形操作了，所以它具有极大的应用价值。
  Canvas 元素本身是没有绘图能力的，它需要借助JavaScript 来实现绘图功能。
---------------------------------------------------------------------------
b.Canvas标签的历史
标记由 Apple 在 Safari 1.3 Web  浏览器中引入。对 HTML 进行这一扩展的原因
在于，希望HTML 在  Safari 中的绘图能力也能为  Mac  OS  X 桌面的  Dashboard 组件所使用，
并且 Apple  希望有一种方式在 Dashboard  中支持脚本化的图形。
Firefox 1.5  和 Opera 9  都跟随了 Safari  的引领，这两个浏览器都支持 标记。
可以在 IE  中使用 标记，并在 IE  的 VML  支持基础上用开源的 JavaScript  代码
（由 Google  发起）来构建具有兼容性的画布。
的标准化工作正在由一个 Web  浏览器厂商的非正式协会进行推动。目前
已经成为 HTML5  草案中一个正式的标签
--------------------------------------------------------
c.Canvas的定义和用法
使用Canvas 标签，只需要向HTML5里添加Canvas 元素即可，代码如下：

------------------------------------------
d.使用Canvas来绘图
onload = function() {
  draw();
};
function draw() {
  /* 使用 id 来寻找 Canvas  元素 */
  var canvas = document.getElementById('canvassample');
  /* 验证Canvas 元素是否存在，以及浏览器是否支持Canvas 元素*/
  if ( ! canvas || ! canvas.getContext ) return false;  /* 创建 context 对象 */
  var ctx = canvas.getContext('2d');
  /* 画一个红色矩形*/
  cxt.fillStyle="#FF0000";//采用fi llStyle 方法将画笔颜色设置为红色
  cxt.fillRect(0,0,150,75);
}
---------------------------------------
e.要使用Canvas 元素，首先要根据id 或name，将Canvas 对
  象取出来，上面的代码使用的是 getElementById 方法，如果给Canvas 标签加入了name属
  性，那么也可以使用getElementByTagName 来获取Canvas 对象。
  另外，要使用Canvas 元素，必须先判断这个元素是否存在及用户所使用的浏览器是否
  支持此元素。如果无法使用Canvas 元素，那么下面做的所有事情都是无意义的。
  上面的代码在使用getContext 方法时，传递了一个“2d”参数，这就可以得到二维的
context对象以实现二维图形的描画。试想一下，如果将来Canvas 可以描画三维图形，或许
也可以使用“3d”参数。但是目前还只能使用“2d”作为参数。
------------------------------------------------------------
f.在上面的例子中，采用fillStyle 方法将画笔颜色设置为红色。另外，用fillRect 方法规定
了图形的形状、位置和尺寸。
--------------------------------------------
g.Canvas的限制
  使用Canvas 可拥有多种绘制路径、矩形、圆形、字符及添加图像的方法。但是绘制的
  图形是静止的，如果要让所画的图形动起来，则需要画出每一帧的图形，然后再连接起来。
  虽然Canvas 可以对图形进行一系列操作，但是效率和普及性都存在一定的问题，对于
  一些相对复杂的图形和动画等，目前来看，还是Flash更胜一筹。
  另外，Canvas 是HTML5的新属性，在使用时需要考虑用户的浏览器和使用环境。
  canvas 目前只是一张二维画布，如果要想实现三维效果，需要借助第三方类库，如
  three.js 或者Papervision3D等。
-------------------------------------------------
h.浏览器的支持
各种主流浏览器对Canvas 的支持情况如表1-1 所示。
表1-1　浏览器对Canvas的支持度一览表
浏览器（版本） 是否支持Canvas元素
IE8 ×
IE9 ○
Firefox 3.6 ○
Chrome 10.0 ○ 
Safari 5.0 ○
Opera 11.0 ○
可以看到，支持Canvas 的浏览器还是比较多的。但是在IE 浏览器中，目前只有IE9 以
及更高版本才可以使用HTML5的Canvas 标签。如果使用IE8 或更低版本的IE 浏览器，需
要引入Google 发布的开源类库ExplorerCanvas 才可以，代码如下所示：
< ！-- [if IE]>
ExplorerCanvas 的下载地址为： http://code.google.com/p/explorercanvas/downloads/list 。
另外需要说明的是，低版本IE 浏览器虽然引入开源类库ExplorerCanvas 可以使用Canvas ，
但是在功能上会有很多限制，如无法使用fi llText 方法等。
--------------------------------------------------------
2013/6/11
04.html5开发环境的搭建.
a.创梦技术qq交流群：CreDream：251572072
i.准备一个本地服务器
  对于MAC,本身就自带了一个服务器,但是对于其他系统可以使用XAMPP
  (apache +MySql+PHP+PERL)他是一个功能强大的服务器开发系统
  支持windows,linux,solaris系统下安装.支持多语言
-------------------------------------------
j.XAMPP的官网网址为:http://www.apachefriends.org
  下载安装后打开xampp文件夹并启动xampp-control.exe,点击Apache右侧的Start按钮启动Apache
  使得apache变为running 状态.将用户的文件或工程放到XAMPP安装文件夹下的htdocs文件夹下就可以
  用localhost/文件名来访问了.
-----------------------------------------
k.另外为了使得javascript的开发有更好的提示功能,还需要安装eclipse.
  给eclipse安装html5开发支持环境:
  1.在eclipse中,打开help选择-->install new software选项.
  2.在弹出的窗口中的work with选项中填写:http://download.aptana.com/studio3/plugin
  3.单击Add 按钮，出现安装Aptana Studio 3 界面，安装后重新启动Eclipse。
    在重新启动了Eclipse后，单击Eclipse左上角的File 菜单，依次单击New →Web
    Project ，新建一个Web Project
------------------------------------
  4.然后在New  From Template 菜单中，依次单击HTML →HTML5 Template，新建一个
    HTML 文件
    至此，整个准备工作就完成了。
-----------------------------------------------
l.测试与上传代码
   在上传工程代码的时候，需要将工程里包含的HTML 、图片及JavaScript 等所有文件上
   传至服务器，并保证文件结构不变。
  建立一个sample1.5.1 工程，在工程中新建一个index.html 文件
 

templates

Hellow World

© Copyright  by lufy

--------------------------------------------------