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基础教程中，你可能会学习到如何绘制基本形状、组合形状、处理颜色和渐变、绘制文本、处理图像、实现动画效果、响应用户交互以及优化Canvas性能等内容。这些知识对于创建动态网页和游戏至关重要。通过...
《HTML5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起，全面介绍了HTML5 Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态，以及变形、合成、处理图像和视频等，让...
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页...通过学习，开发者可以创建动态图表、游戏、数据可视化应用，甚至是完整的2D渲染引擎。无论是初学者还是有经验的开发者，都能从中受益，提升Web开发技能。
Canvas 教程 本资源提供了详细的 canvas 使用技巧和相关技术阐述，对于初涉 JavaScript 和 canvas 相关技术的朋友有极大地帮助。 canvas 是新的 HTML 元素，可以通过 Script（通常是 JavaScript）绘制图形，用于...
详细的H5canvas教程，学习和实用canvas必备，欢迎下载
**WPF经典教程之Canvas布局** Canvas是WPF中一种特殊的布局控件，它允许开发者对子元素进行绝对定位。在Canvas中，每个子元素的位置是通过设置`Canvas.Left`、`Canvas.Right`、`Canvas.Top`和`Canvas.Bottom`属性来...
canvas进阶版ppt,学习canvas必备HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，可以创建...
HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码 HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码 HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码 ...
### Html5 Canvas史上最全面的教程 #### 基础篇：了解HTML5 Canvas的基本概念与用法 HTML5 Canvas是一个非常强大的工具，它允许开发者直接在网页上进行绘图操作，而无需借助任何插件或外部库。Canvas的出现极大地...
HTML5 Canvas 初级入门教程 HTML5 Canvas 是 HTML5 中一个非常重要的功能，它允许开发者在浏览器中绘制图形，而不需要使用任何插件。这个功能可以在所有现代浏览器中使用，包括 Internet Explorer 9、Safari 3、...
本基础教程由（英）Rob Hawkes撰写，旨在帮助初学者掌握Canvas的基本概念和实用技巧。 一、HTML5 Canvas概述 HTML5 Canvas是一个基于矢量图形的画布元素，通过JavaScript API来绘制和操作图像。这个API提供了大量的...
HTML5 Canvas 教程 canvas 是 HTML5 中一个新的用于通过脚本（通常是 JavaScript）绘图的元素。它可以用于绘图、制作图片的组合或者简单的动画。 Canvas 提供了一个名为 2D API 的编程接口，允许开发者使用 ...
这个初级入门教程主要涵盖了Canvas的基本概念、使用方式以及一些基本的绘图操作。 首先，Canvas是一个HTML标签，通过`<canvas>`元素在网页中创建一个可绘制的区域。例如： ```html <canvas width="500" height="500...
HTML5_canvas基础教程.wps
Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、...
HTML 5高级移动开发 Canvas画布详细内容讲解，实例教程，实例练习