html5学习笔记---03. Canvas简介,Canvas的使用方法
2013-06-11 14:35
691 查看
2013/6/10
03. Canvas简介
a.创梦技术qq交流群：CreDream：251572072
-------------------------
a.Canvas 元素是HTML5的新元素之一，用于在网页上绘制图形，相当于在 HTML 中嵌
入了一张画布，这样就可以直接在HTML 上进行图形操作了，所以它具有极大的应用价值。
Canvas 元素本身是没有绘图能力的，它需要借助JavaScript 来实现绘图功能。
---------------------------------------------------------------------------
b.Canvas标签的历史
<canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 进行这一扩展的原因
在于，希望HTML 在 Safari 中的绘图能力也能为 Mac OS X 桌面的 Dashboard 组件所使用，
并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领，这两个浏览器都支持<canvas> 标记。
可以在 IE 中使用<canvas> 标记，并在 IE 的 VML 支持基础上用开源的 JavaScript 代码
（由 Google 发起）来构建具有兼容性的画布。
<canvas> 的标准化工作正在由一个 Web 浏览器厂商的非正式协会进行推动。目前
<canvas> 已经成为 HTML5 草案中一个正式的标签
--------------------------------------------------------
c.Canvas的定义和用法
使用Canvas 标签，只需要向HTML5里添加Canvas 元素即可，代码如下：
<canvas id="myCanvas" width="200" height="100"></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]><script src="excanvas.js"></script><![endif]-->
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 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>templates</title>
</head>
<body>
<div>
<header>
<h1>templates</h1>
</header>
<nav>
<p>Hellow World</p>
</nav>
<footer>
<p>© Copyright by lufy</p>
</footer>
</div>
</body>
</html>
--------------------------------------------------
03. Canvas简介
a.创梦技术qq交流群：CreDream：251572072
-------------------------
a.Canvas 元素是HTML5的新元素之一，用于在网页上绘制图形，相当于在 HTML 中嵌
入了一张画布，这样就可以直接在HTML 上进行图形操作了，所以它具有极大的应用价值。
Canvas 元素本身是没有绘图能力的，它需要借助JavaScript 来实现绘图功能。
---------------------------------------------------------------------------
b.Canvas标签的历史
<canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 进行这一扩展的原因
在于，希望HTML 在 Safari 中的绘图能力也能为 Mac OS X 桌面的 Dashboard 组件所使用，
并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领，这两个浏览器都支持<canvas> 标记。
可以在 IE 中使用<canvas> 标记，并在 IE 的 VML 支持基础上用开源的 JavaScript 代码
（由 Google 发起）来构建具有兼容性的画布。
<canvas> 的标准化工作正在由一个 Web 浏览器厂商的非正式协会进行推动。目前
<canvas> 已经成为 HTML5 草案中一个正式的标签
--------------------------------------------------------
c.Canvas的定义和用法
使用Canvas 标签，只需要向HTML5里添加Canvas 元素即可，代码如下：
<canvas id="myCanvas" width="200" height="100"></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]><script src="excanvas.js"></script><![endif]-->
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 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>templates</title>
</head>
<body>
<div>
<header>
<h1>templates</h1>
</header>
<nav>
<p>Hellow World</p>
</nav>
<footer>
<p>© Copyright by lufy</p>
</footer>
</div>
</body>
</html>
--------------------------------------------------
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html5学习笔记---03. Canvas简介,Canvas的使用方法
- HTML5_Canvas_属性、定义及方法(学习笔记)
- DayDayUP之HTML5学习笔记五---Canvas简单的使用
- HTML5基础03----HTML5元素简介及使用方法
- HTML5 学习笔记13-Canvas使用路径
- HTML5学习笔记之使用canvas绘制矩形
- HTML5 学习笔记12-Canvas标签的使用
- html5学习笔记(6)使用canvas绘图2
- JAVA学习笔记（一）Vector类中set方法的使用问题
- C++ Primer 学习笔记（1）——vector的使用方法
- Java学习笔记2：当构造方法有多个参数时考虑使用Builder
- Android 学习 笔记_03. SQLite的使用
- HTML学习笔记（一）_HTML5简介
- 学习笔记：银江数据源在.net下的使用方法(marshal类在框架下调用非框架dll中的使用)
- HTML5学习笔记------Canvas
- Effective C++学习笔记——条款03：尽可能使用const
- HTML5项目笔记3：使用Canvas设计离线系统的Logo
- 【Ruby学习笔记】5：方法的使用和特性
- Java学习笔记 50. 三种不能使用方法覆盖的情况
- Android（java）学习笔记107-1：通过反射获得带参构造方法并且使用