HTML5 画布

HTML5 元素为我们使用 JavaScript 绘制图形提供了一种简单而又强大的方式。它可以用来绘制图表,制作摄影作品或者做一些简单(以及复杂)的动画。

这里有一个简单的 元素,除了所有核心的 HTML5 属性,比如 id,name 和 class 等等之外,它只有两个特定的属性 widthheight

<canvas id="mycanvas" width="100" height="100"></canvas>

使用 _getElementById()__ 方法很容易找到这个 元素,如下所示:

var canvas  = document.getElementById("mycanvas");

我们来看一个在 HTML5 文档中使用 元素的简单示例。

<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{
   border:1px solid red;
}
</style>
</head>
<body>
   <canvas id="mycanvas" width="100" height="100"></canvas>
</body>
</html>

便于学习上述概念 - 请使用最新版的 Safari 或者 Opera 进行在线练习

渲染上下文

初始为空,要显示某物,脚本首先需要访问渲染上下文,然后再上面绘图。 canvas 元素有一个叫做 **getContext** 的 DOM 方法,用于获得渲染上下文和它的绘图功能。这个函数接受一个参数, **2d** 上下文类型。 下面的代码就是访问需要的上下文以及检测浏览器是否支持 元素: ```javascript var canvas = document.getElementById("mycanvas"); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // drawing code here } else { // canvas-unsupported code here } ``` 浏览器支持 ----- 最新版的 FireFox,Safari,Chrome 和 Opera 都支持 HTML5 Canvas,但是 IE8 不支持原生 Canvas。 我们可以使用 [ExplorerCanvas](http://code.google.com/p/explorercanvas/index.html) 让 IE 浏览器支持 Canvas。只需按照如下方式引入这个脚本即可: ```html ``` HTML5 Canvas 示例 --------------- 本教程涵盖下列 HTML5 元素相关的示例。 | 示例 | 描述 | |------------------------------------------------------------------------------------------------|--------------------------------------| | [绘制矩形](http://www.tutorialspoint.com/html5/canvas_drawing_rectangles.htm "Drawing Rectangles") | 学习如何使用 HTML5 元素绘制矩形。 | | [绘制路径](http://www.tutorialspoint.com/html5/canvas_drawing_paths.htm "Drawing Paths") | 学习如何在 HTML5 元素中使用路径创建形状。 | | [绘制线条](http://www.tutorialspoint.com/html5/canvas_drawing_lines.htm "Drawing Lines") | 学习如何使用 HTML5 元素绘制线条。 | | [绘制贝塞尔曲线](http://www.tutorialspoint.com/html5/canvas_drawing_bezier.htm "Drawing Bezier") | 学习如何使用 HTML5 元素绘制贝塞尔曲线。、 | | [绘制二次曲线](http://www.tutorialspoint.com/html5/canvas_drawing_quadratic.htm "Drawing Quadratic") | 学习如何使用 HTML5 元素绘制二次曲线。 | | [使用图像](http://www.tutorialspoint.com/html5/canvas_using_images.htm "Using images") | 学习如何在 HTML5 元素中使用图像。 | | [创建渐变](http://www.tutorialspoint.com/html5/canvas_create_gradients.htm "Create Gradients") | 学习如何使用 HTML5 元素创建渐变。 | | [样式和颜色](http://www.tutorialspoint.com/html5/canvas_styles_and_colors.htm "Styles and Colors") | 学习如何使用 HTML5 元素应用样式和颜色。 | | [文本和字体](http://www.tutorialspoint.com/html5/canvas_text_fonts.htm "Text and Fonts") | 学习如何使用不同的字体和尺寸绘制神奇的文字。 | | [图案和投影](http://www.tutorialspoint.com/html5/canvas_pattern_shadow.htm "Pattern and Shadow") | 学习如何绘制不同的图案和阴影。 | | [画布状态](http://www.tutorialspoint.com/html5/canvas_states.htm "Canvas States") | 学习如何在画布上做复杂绘图时保存和恢复画布状态。 | | [画布平移](http://www.tutorialspoint.com/html5/canvas_translation.htm "Canvas Translation") | 这个方法用于移动画布和它原点到网格上的不同点。 | | [画布旋转](http://www.tutorialspoint.com/html5/canvas_rotation.htm "Canvas Rotation") | 这个方法用于围绕当前原点旋转画布。 | | [画布缩放](http://www.tutorialspoint.com/html5/canvas_scaling.htm "Canvas Scaling") | 这个方法用于增大或者减小画布网格中的单位。 | | [画布变换](http://www.tutorialspoint.com/html5/canvas_transform.htm "Canvas Transform") | 这个方法允许我们直接修改变换矩阵。 | | [画布合成](http://www.tutorialspoint.com/html5/canvas_composition.htm "Canvas Composition") | 这个方法用于从画布上屏蔽某些区域或者清除某一部分。 | | [Canvas 动画](http://www.tutorialspoint.com/html5/canvas_animation.htm "Canvas Animation") | 学习如何使用 HTML5 画布和 JavaScript 创建基本的动画。 |