HTML5 - Canvas
HTML5元素canvas为您提供了一种使用JavaScript绘制图形的简单而强大的方法。它可以用于绘制图形，制作照片合成或做简单（而不是那么简单）的动画。
这是一个简单的canvas元素，它只有两个特定属性width和height以及所有核心HTML5属性，如id，name和class等
<canvas id = "mycanvas" width = "100" height = "100"></canvas>
您可以使用getElementById()方法在DOM中轻松找到<canvas>元素，如下所示 -
var canvas = document.getElementById("mycanvas");
让我们看一个在HTML5文档中使用canvas元素的简单示例。
<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{border:1px solid red;}
</style>
</head>
<body>
<canvas id = "mycanvas" width = "100" height = "100"></canvas>
</body>
</html>
这将产生以下结果 -
新页面打开渲染上下文
canvas最初是空白的，为了显示某些内容，脚本首先需要访问渲染上下文并在其上绘制。
canvas元素有一个名为getContext的DOM方法，用于获取渲染上下文及其绘图函数。 该函数采用一个参数，即上下文的类型2d 。
以下是获取所需上下文的代码，并检查浏览器是否支持canvas元素 -
var canvas = document.getElementById("mycanvas");
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
浏览器支持 (Browser Support)
最新版本的Firefox，Safari，Chrome和Opera都支持HTML5 Canvas，但IE8本身不支持canvas。
您可以使用ExplorerCanvas通过Internet Explorer获得画布支持。 你只需要包含这个JavaScript如下 -
<!--[if IE]><script src = "excanvas.js"></script><![endif]-->
HTML5画布示例
本教程介绍了与HTML5 canvas元素相关的以下示例。
| Sr.No. | 示例和说明 |
|---|---|
| 1 | Drawing Rectangles 了解如何使用HTML5 canvas元素绘制矩形 |
| 2 | Drawing Paths 了解如何使用HTML5 canvas元素中的路径创建形状 |
| 3 | Drawing Lines 了解如何使用HTML5 canvas元素绘制线条 |
| 4 | Drawing Bezier 了解如何使用HTML5 canvas元素绘制Bezier曲线 |
| 5 | Drawing Quadratic 了解如何使用HTML5 canvas元素绘制二次曲线 |
| 6 | Using Images 了解如何使用HTML5 canvas元素使用图像 |
| 7 | Create Gradients 了解如何使用HTML5 canvas元素创建渐变 |
| 8 | Styles and Colors 了解如何使用HTML5 canvas元素应用样式和颜色 |
| 9 | Text and Fonts 了解如何使用不同的字体及其大小绘制出色的文本。 |
| 10 | Pattern and Shadow 了解如何绘制不同的图案和阴影。 |
| 11 | Canvas States 了解如何在画布上执行复杂绘图时保存和恢复画布状态。 |
| 12 | Canvas Translation 此方法用于将画布及其原点移动到网格中的不同点。 |
| 13 | Canvas Rotation 此方法用于围绕当前原点旋转画布。 |
| 14 | Canvas Scaling 此方法用于增加或减少画布网格中的单位。 |
| 15 | Canvas Transform 这些方法允许直接修改转换矩阵。 |
| 16 | Canvas Composition 此方法用于屏蔽某些区域或从画布中清除部分。 |
| 17 | Canvas Animation 了解如何使用HTML5画布和JavaScript创建基本动画。 |
