http://rockux.com/archives/%E3%80%90canvas%E5%AD%A6%E4%B9%A0%E6%95%99%E7%A8%8B%E3%80%91canvas%E4%BB%8B%E7%BB%8D
这一系列教程会带你快速认识Canvas，这是第一篇，RockUX先带你简单认识一下Canvas。Canvas是现代浏览器中内建的一个画图的方法，这篇文章中，RockUX会介绍如何访问Canvas元素，怎么画图形，变换颜色以及擦除。这个新技术非常的令人激动。
Canvas元素简介
当你听到Canvas的时候，你的第一反应应该是会想到HTML5的新元素。技术上来说，这只是一部分，从现在开始，我们先忘记那个吧。Canvas元素是浏览器新技术对外的一个窗口。
使用Canvas元素非常的简单，就是一个简单的HTML标签和给定的宽高。
<canvas height="500" width="500">
<!--这里是备注内容-->
</canvas>
这个canvas当然什么都不会做，他只会在你的页面上放置一个透明的画布。Canvas里面写的内容会在浏览器不支持canvas的时候显示出来。
浏览器的支持
哪些浏览器支持Canvas，这个很重要。基本上现代浏览器都支持，包括最新版的IE。
- Internet Explorer (9.0+)
- Safari (3.0+)
- Firefox (3.0+)
- Chrome (3.0+)
- Opera (10.0+)
- iOS (1.0+)
- Android (1.0+)
有意思的是，你在IE8及以下的版本中可以使用插件来让浏览器支持，这里
查看。
Canvas的尺寸
学习Canvas很重要的一点就是要给他设置大小尺寸。使用CSS来设置宽高，会导致Canvas去调整适应那个尺寸。这背后的逻辑是：Canvas元素的渲染是调用浏览器的2D图形引擎来做的。无论怎样，只要知道用CSS来设置Canvas的宽高会有一些奇怪的问题。
2D图形渲染
上一节中提到的Canvas只是整个系统中的一部分。另外一部分就是2D渲染引擎，可以让你立即感受到你所做的的一个重要部分。
再解释一下：当你使用Canvas的时候，你不是在Canvas上面直接画。相反你实际上是在一个2D图形环境上操作，只不过你是调用
JavaScript的API通过Canvas元素做到的。细节的东西可能在这里没什么用处，但是还是了解一下吧。
坐标系统
如果你之前使用过2D图形编程语言的话，那么你应该了解屏幕坐标系统。Canvas的2D图形引擎也没什么区别，也是用直角坐标系，原点坐标在左上角。X轴右移增大，Y轴下移增大。还是很直观的。 大部分情况下，屏幕上的一像素相当于这个坐标系的一个单位。
访问2D图形引擎
调用图形接口，你需要使用JavaScript的API，你需要使用的是getContext方法：
<!DOCTYPE html>
<html>
<head>
<title>Canvas from scratch</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
});
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<!-- Insert fallback content here -->
</canvas>
</body>
</html>
这里使用jQuery是为了用domready方法，你也可以用你自己喜欢的JS库，然后把这段代码放在文档底部就好了。
在调用getContext方法之后，变量ctx中就包含了2D图形引擎的引用，这意味着你就可以开始在Canvas上面画东西了。
画矩形
在获取2D图形引擎的引用之后，你就可以通过一些方法开始画图了。最基础的一个方法就是fillRect，这个方法会使用一定颜色（默认是黑色）画一个特定的矩形。
添加下面的代码：
ctx.fillRect(50,50,100,100);
这会在画布上画一个黑方块出来，距离画布边缘也有一定的距离。
- 大小: 30.9 KB
- 大小: 5.1 KB
分享到：
相关推荐
资源名称：HTML5 Canvas基础教程内容简介：《HTML5 Canvas基础教程》从HTML5和Javaｓｃｒｉｐｔ(以及jQuery)的基础知识讲起，全面介绍了HTML5 Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复...
《HTML 5 Canvas基础教程》从HTML5和JavaScript（以及jQuery）的基础知识讲起，全面介绍了HTML5Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态，以及变形、合成、处理图像和视频等，让...
《HTML5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起，全面介绍了HTML5 Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态，以及变形、合成、处理图像和视频等，让...
HTML5 Canvas基础教程
HTML5 Canvas基础教程源代码
详细的H5canvas教程，学习和实用canvas必备，欢迎下载
canvas进阶版ppt,学习canvas必备HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，可以创建...
HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码 HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码 HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码 ...
本教程适合H5 Canvas绘图的初学者阅读，丰富的范例能让读者快速掌握H5 Canvas画布的基本使用方法，能创建简单的动画，能检测捕捉鼠标动作。
HTML5 canvas 基础教程 pdf中文电子书,（英）Rob Hawkes著
HTML5CANVAS初级入门教程.pdf
本资源梯提供详细的canvas使用技巧和相关技术阐述，对于初涉js和canvas相关技术的朋友有极大地帮助
HTML5_canvas基础教程.wps
HTML5canvas初级入门教程.pdf
HTML 5高级移动开发 Canvas画布详细内容讲解，实例教程，实例练习
在WPF中子元素的绝对定位的布局控件 其子元素使用Width、Height定义元素的宽度和高度 使用Convas.Left（Convas.Right）、...WPF经典教程之Grid、UniformGrid布局 http://download.csdn.net/detail/cleopard/8002993
唯一的全面讲解html5 canvas的教材，总有70页。
Canvas绘图详解视频教程.txt 前端必备技能，助你快速掌握