> 网页设计 > HTML5 >

HTML5 Canvas教程：简介 2016-12-24 13:58　出处：未知　人气：　

在绘画工具包中最重要的一个工具是画布（canvas）。在一个几乎无限的变化和组合之中，它给予开发者许多自由空间去表达各种的感情，效果，概念等等。这个自由的空间只可能被两件事所限制——他们的技术层次和想象力。

这种情况和在网页开发的世界有异曲同工之妙。随着HTML5的不断进步以及其强大的规模，网页开发者已经能够做出过去做不到的事情了。因为有一项叫做 HTML5 Canvas 技术的诞生，直接在浏览器上画图以及创建动画已经是完全有可能的了。

什么是 HTML5 Canvas?

canvas元素是一个在HTML代码中使用 width 和 height 属性定义的元素。然而，canvas元素真正地力量归功于 HTML5 Canvas API。这组API通过 JavaScript 代码来访问全套绘画函数，因此允许动态生成画面。

HTML5 Canvas 强大在哪里?

这里有些原因，你可能会想学习使用 HTML5 canvas 的特性：

互动性。Canvas 是完全互动的. 他可以通过监听键盘，鼠标或者触摸事件来回应用户的动作。因此一个开发人员并不会被局限在静态绘图或者图片。

动画。每一个画在 canvas 上的对象都是可动的。这允许在所有层次上创建动画，从简单的弹跳小球到复杂的 运动学正逆解 。

灵活性。开发者可以用canvas创建任何东西。他可以展示线段，形状，文字，图片，等等 —— 包括或不包括动画。因此，添加视频或者音频到一个canvas应用也是可行的。

浏览器/平台支持。所有  都支持HTML5 canvas，很多设备都支持，像桌面，平板和智能手机这样的。

普及程度。Canvas的普及速度而又稳定地增长着，因此不会缺少资源。

这是一个web标准。不像 Flash 和 Silverlight， canvas是HTML5开放技术的一部分。虽然并不是所有的浏览器都能实现它所有的特性，开发者能够肯定 canvas 的前途一片光明。

只需一次开发，可以在跨平台运行。HTML5 canvas提供了极佳的可移植性。一旦创建了，不像 Flash 和 Silverlight，一个cavnas 应用能够在任何平台上运行——从大电脑到小手机设备。

可免费获得的开发工具。创建HTML5 canvas应用的基本工具就是一个浏览器和一个好的编辑器。外加，有许多很赞的免费的库和工具用于帮助开发者制作先进的canvas开发。

你可以用 HTML5 Canvas 创建什么样的应用

canvas很赞。但是你究竟能用他做什么呢？让我们来瞅瞅。

游戏。HTML5 Canvas 的特性设置对与开发所有类型的2D和3D游戏是理想的选择。

广告。HTML5 Canvas 是Flash为基础的广告横幅和广告的极佳替代。吸引买家注意的所需的特性，它都拥有。

数据表示。HTML5可以收集全局数据源并用canvas自动生成视觉吸引和互动的图表。

教育与培训。HTML5 canvas 结合text, images, videos, 和 audio 产生高效而具有吸引力的学习体验。

艺术与装饰。只要你有想象力和canvas各种各样的颜色，渐变，模式，透明，阴影和剪裁功能， 各种艺术和装饰图形都能绘画。

现在知道为什么你需要学canvas了吧，让我们看看 HTML5 Canvas 的基础然后学习如何开始使用它。

Canvas 渲染内容

每个 HTML5 canvas 元素都要有个 context 。context 定义了你将使用的 HTML5 Canvas API。2d context是用于绘制2D图形和处理位图图像。3d context是用于三维图形的创建和操作。后者实际上被称为 WebGL ，是建立在 OpenGL ES 基础之上的。

开始

开始使用canvas，你所需要的就是一个代码编辑器和支持HTML5 canvas的浏览器。我使用的是SUblime和Chrome，你可以使用你想用的。

我们的HTML看上去是这个样的：

=>Your browser doesn’t currently support HTML5 Canvas. Please check caniuse.com/#feat=canvas for information on browser support for canvas.</p> <!-- OPTION 2: put fallback content (text, image, Flash, etc.) if the browser doesn't support canvas --> </canvas>

这里是我们的 JavaScript，我们可以将此放在HTML页面的底部：

var canvas = document.getElementById('exampleCanvas'), context = canvas.getContext('2d'); // code examples will continue here...

默认情况下，即使在html中没有定义大小，浏览器默认创建一个宽300像素和高150像素的canvas元素。你可以通过定义 width 和 height 改变canvas尺寸，就像我在HTML中做的一样。

注意，我们赋予了canvas id 的属性，我们将在JavaScript中用到。最后，如果你希望，你可以给canvas添加边框，使之通过一个框架可见。这不是必要的，只是用于帮我们看到canvas元素的边界。

注意在 <canvas> 标签开闭和之间，我添加一段内容，如果浏览器不支持canvas，则显示这段内容。这可以是任何类型的内容，只要老浏览器支持。

JavaScript从两行开始。在第一行，我创建了一个变量通过canvas元素的ID缓存它。第二行创建一个变量（ context ），用 getContext() 函数引用canvas的2D context。我们会用 context 变量来获得canvas的所有绘画函数和属性。

准备好了canvas，我们开始试验canvas API吧！但是在那之前，让我们来理清canvas的一些特性吧。

HTML5 Canvas 尺寸 vs. 绘图尺寸

除了 canvas 元素的 width 和 height 属性，你同样也可以用CSS来定义canvas元素的大小。然而通过SS改变一个canvas元素的大小和直接设置元素的 width 和 height 的属性是不一样的。这是因为一个canvas实际上有两个尺寸：元素本身的大小和元素绘图面积的大小。