cherryvenus

HTML5 Canvas教程: 简介

cherryvenus · 2016-12-23翻译 · 735阅读 原文链接

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

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

什么是 HTML5 Canvas?

canvas元素是一个在HTML代码中使用widthheight属性定义的元素。然而,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看上去是这个样的:

<canvas id="exampleCanvas" width="500" height="300">

  <!-- OPTION 1: leave a message here if browser doesn't support canvas -->
    <p>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元素。你可以通过定义widthheight 改变canvas尺寸,就像我在HTML中做的一样。

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

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

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

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

HTML5 Canvas 尺寸 vs. 绘图尺寸

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

当你设置元素的 widthheight 属性,你同时设置了元素的尺寸和元素绘图面积的尺寸;然而,当你使用CSS来设置一个canvas元素的大小的时候,你仅仅设置了元素的尺寸,而不是绘图面积的尺寸。当canvas元素的尺寸和绘图面积的尺寸不一样的时候,浏览器会缩放绘图面积来符合元素的尺寸。

正是这个原因,需要使用元素的 widthheight 属性来设置元素尺寸,而不是用CSS。

理解 Canvas 坐标系统

在二维空间,位置是通过X和Y轴坐标来引用的。X轴为水平延伸,Y轴为垂直延伸。中心的位置是x = 0y = 0,这也可以被表示为(0, 0)。定位对象的方法,在数学中被定义为 笛卡儿坐标系统

canvas的坐标系统,然而,将原点放在画布的左上角,X轴向右增加,Y轴向下增加。因此和传统的笛卡尔坐标空间不一样,canvas空间没有可见的负值坐标点。使用负值坐标不会导致程序出错,但是使用负值坐标的元素不会在页面上显示。

Canvas 笛卡儿集空间

基础 Canvas 例子

如前所述,HTML5 canvas 可以让你创建许多类型的元素,包括线段,曲线,路径,形状,文本等等。在这个例子中,让你看到这些对象是如何绘制的。我不深入canvas api的细节;这些只是一些简单地帮助你了解canvas是如何运行的。

画线段

画一条线段,我们用4个canvas API的方法。我们从beginPath()方法开始,这个方法指示浏览器准备开始画一条新路径。然后我们用 moveTo(x, y) 方法来指定线条的开始点。然后 lineTo(x, y) 方法设置线条的结束点,然后画一条线连接两点。

这个时候,线条会被绘制,但是依然是不可见的。为了使之可见,我们使用stroke()方法用默认的黑色来显示这条线段。

context.beginPath();
context.moveTo(50, 50);
context.lineTo(250, 150);
context.stroke();

看来自SitePoint (@SitePoint)在CodePen上的Canvas线条例子 .

画矩形

画一个矩形,我们用fillRect(x, y, width, height) 这个方法来设置坐标和尺寸,通过fillStyle这个属性来填满颜色。

context.fillStyle = 'yellow';
context.fillRect(50, 50, 200, 100);

看来自SitePoint (@SitePoint)在CodePen上的Canvas 矩形例子

注意矩形是被定位在左上角的。

画文本

为了在canvas上画文本,我们用fillText(string, x, y)font属性来设置投字体,大小和文本样式(和CSS中font的简写类似)。

context.font = 'italic 40pt Calibri, sans-serif';
context.fillText('Hello World!', 50, 50);

看来自SitePoint (@SitePoint)在CodePen上的Canvas文本例子

你需要意识到虽然用HTML5 canvas简单的绘图很容易,创建复杂的图形和动画要求一些数学和物理知识的支持。其中一本关于此主题的书是Foundation HTML5 Animation with JavaScript。这本书对于动画有着很好的教学资源,从简单的到复杂的动画都有。

更多资源

这里有些资源如果你想深入学习:

  • canvas指导 – MDN上一个很好的教程, 全套例子, 图解, 和详细解释。

  • HTML5 Canvas元素指导 – Six Revisions 的初学者教程.

  • HTML5 Canvas教程 – Eric Rowell 创建的全套教程, 他是 KineticJS canvas 库的创建者。所有的例子都是可交互的; 你可以与之互动,看看结果是什么。

加快 Canvas 开发

和“原生” HTML5 Canvas API打交道是一件乏味的工作。当你学好了它,然后再使用一个优秀的canvas库,这是一好主意,因为这能够加快并简化你的canvas开发。

这里有一些流行的选择:

Another way to speed up your HTML5 Canvas development is by using the Ai->Canvas plugin for Adobe Illustrator. You can find an overview of the plugin in this article on SitePoint. 另一个可以加速HTML5 canvas开发的就是使用 Ai->Canvas在AI中的插件。你可以在sitepoint上的这篇文章中,找到这个插件的概述。

总结

就这样。我希望这篇 HTML5 Canvas 指导 的介绍能给你一个极佳的起点,让你继续学习和探索这样强大技术。

相关文章